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 相关文章推荐
关于js内存泄露的一个好例子
Dec 09 Javascript
js获取元素外链样式的方法
Jan 27 Javascript
js实现鼠标经过时图片滚动停止的方法
Feb 16 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
javascript实现倒计时提示框
Mar 02 Javascript
小程序wx.getUserProfile接口的具体使用
js实现自动锁屏功能
Jun 02 #Javascript
如何将JavaScript将数组转为树形结构
Jun 02 #Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
使用react+redux实现计数器功能及遇到问题
微信小程序基础教程之echart的使用
vue实现水波涟漪效果的点击反馈指令
You might like
第十节--抽象方法和抽象类
2006/11/16 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP 读取和编写 XML
2014/11/19 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
Javascript attachEvent传递参数的办法
2009/12/14 Javascript
javascript sudoku 数独智力游戏生成代码
2010/03/27 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
JavaScript中的return语句简单介绍
2015/12/07 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
vue中的计算属性的使用和vue实例的方法示例
2017/12/04 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
2018/07/05 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
js实现随机抽奖
2020/03/19 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
python石头剪刀布小游戏(三局两胜制)
2021/01/20 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
python输出数学符号实例
2020/05/11 Python
Python异常处理机制结构实例解析
2020/07/23 Python
群教个人对照检查材料
2014/08/20 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
在JavaScript中如何使用宏详解
2021/05/06 Javascript
python使用PySimpleGUI设置进度条及控件使用
2021/06/10 Python
Mysql的Table doesn't exist问题及解决
2022/12/24 MySQL