react中怎么插入图片？react中怎么给img设置src？相信初学react的同学，对这些问题并不清楚，本篇文章将向你介绍react中使用图片的几种方式。
用react怎么插图片
1、img标签引入图片
因为react其实是通过js的reader函数渲染的页面，所以直接写src=“路径”是无法引入图片
需要用下面的方式引入
<img src={require('../images/picture.png-600')} alt="标签"/>
2、背景图片引入
1 第一种就是常规的 新建一个css文件，然后就可以直接写css语法了
.img {
background: url('../images/picture.png-600') 0 0 no-repeat;
}
2 第二种就是在react组件中通过变量的方式引入,然后直接将变量赋值给img标签
// 引入图片文件
import bg from '../images/bg.png-600'
// 通过字符串拼接的方式定义一个样式对象
const imgStyle = {
width: '100%',
height: '500px',
backgroundImage: 'url(' + bg + ')',
backgroundPosition: 'center 0',
backgroundSize: '2045px 472px<div style="color:transparent">来源gaodai.ma#com搞##代!^码网</div>',
backgroundRepeat: 'no-repeat'
}
class Home extends Component {
constructor () {
super (props)
}
render() {
// 最后直接将变量赋值给标签
<div style="imgStyle">
...
</div>
}
}
更多React相关技术文章，请访问gaodaima搞代码网进行学习！
以上就是用react怎么插图片的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：用react怎么插图片
转载请注明原文链接：用react怎么插图片
