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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
Bootstrap 附加导航(Affix)插件实例详解
Jun 01 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
vue获取当前激活路由的方法
Mar 17 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
小程序wx.getUserProfile接口的具体使用
js实现自动锁屏功能
Jun 02 #Javascript
如何将JavaScript将数组转为树形结构
Jun 02 #Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
使用react+redux实现计数器功能及遇到问题
微信小程序基础教程之echart的使用
vue实现水波涟漪效果的点击反馈指令
You might like
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
php判断是否连接上网络的方法实例详解
2016/12/14 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
Javascript 键盘事件的组合使用实现代码
2012/05/04 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
vue父组件中获取子组件中的数据(实例讲解)
2017/09/27 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
Python的math模块中的常用数学函数整理
2016/02/04 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
对python 判断数字是否小于0的方法详解
2019/01/26 Python
python join方法使用详解
2019/07/30 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
python脚本第一行如何写
2020/08/30 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
html5-Canvas可以在web中绘制各种图形
2012/12/26 HTML / CSS
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
德国足球商店:OUTFITTER
2019/05/06 全球购物
村委会主任先进事迹
2014/01/15 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
网络舆情信息简报
2015/07/21 职场文书
校长新学期致辞
2015/07/30 职场文书
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js