react 项目中引入图片的几种方式


Posted in Javascript onJune 02, 2021

img标签引入图片

因为react其实是通过js的reader函数渲染的页面,所以直接写src=“路径”是无法引入图片

我们可以像引入模块一样引入图片

import img from './../../../../asset/img/user.png'

需要用下面的方式引入

<img src={require('../images/picture.png')} alt="标签"/>

背景图片引入

1 第一种就是常规的 新建一个css文件,然后就可以直接写css语法了

.img {
   background: url('../images/picture.png') 0 0 no-repeat;
}

2 第二种就是在react组件中通过变量的方式引入,然后直接将变量赋值给img标签

// 引入图片文件
import bg from '../images/bg.png'
// 通过字符串拼接的方式定义一个样式对象
const imgStyle = {
  width: '100%',
  height: '500px',
  backgroundImage: 'url(' + bg + ')',
  backgroundPosition: 'center 0',
  backgroundSize: '2045px 472px',
  backgroundRepeat: 'no-repeat'
}
class Home extends Component {
 constructor () {
  super (props)
 }
 render() {
  // 最后直接将变量赋值给标签
  <div style="imgStyle">
   ...
  </div>
 }
}

require

我们也可以将相对路径用require包裹之后直接赋给src,就像在vue中一样。

<img width="100" height="100" src={require('./../../../../asset/img/user.png')} alt="" className={'user-img'}/>

**注意:**这里有个问题,因为file-loader库的版本不同,这里有些细微差别。高版本的file-loader库esModule默认为true,require返回一个ES模块而不是字符串路径。而这个ES模块的default属性为字符串路径,所以应该这样写:

<img width="100" height="100" src={require('./../../../../asset/img/user.png').default} alt="" className={'user-img'}/>

我们也不要去纠结我们的file-loader版本到底是多少,当我们直接使用require还是无法正常显示图片的时候,我们在require后面加个.default即可

到此这篇关于react 项目中引入图片的几种方式的文章就介绍到这了,更多相关react 引入图片内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
强制设为首页代码
Jun 19 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
file控件选择上传文件确定后触发的js事件是哪个
Mar 17 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
js动态切换图片的方法
Jan 20 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
react中使用swiper的具体方法
May 15 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
小程序wx.getUserProfile接口的具体使用
js实现自动锁屏功能
Jun 02 #Javascript
如何将JavaScript将数组转为树形结构
Jun 02 #Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
使用react+redux实现计数器功能及遇到问题
微信小程序基础教程之echart的使用
vue实现水波涟漪效果的点击反馈指令
You might like
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php反弹shell实现代码
2009/04/22 PHP
使ecshop模板中可引用常量的实现方法
2011/06/02 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
php文件压缩之PHPZip类用法实例
2015/06/18 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
PDO::errorInfo讲解
2019/01/28 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
jQuery对象和DOM对象相互转化
2009/04/24 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
js 求时间差的实现代码
2016/04/26 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
2016/10/30 Javascript
JS中数组重排序方法
2016/11/11 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
微信小程序 label 组件详解及简单实例
2017/01/10 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
2017/02/16 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
bootstrap table插件动态加载表头
2019/07/19 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
python列出目录下指定文件与子目录的方法
2015/07/03 Python
Python 判断是否为质数或素数的实例
2017/10/30 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
基于python实现查询ip地址来源
2020/06/02 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
2014年体检中心工作总结
2014/12/23 职场文书
保研推荐信范文
2015/03/25 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
Python集合set()使用的方法详解
2022/03/18 Python
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle