广告位联系
返回顶部
分享到

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

JavaScript 来源:转载 作者:秩名 发布时间:2021-06-03 08:55:23 人浏览
摘要

img标签引入图片 因为react其实是通过js的reader函数渲染的页面,所以直接写src=路径是无法引入图片 我们可以像引入模块一样引入图片 import img from ./../../../../asset/img/user.png 需要用下面的方式引入 img src={require(../images/picture.png)} alt

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即可


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://blog.csdn.net/weixin_45289067/article/details/94852902
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计