react前端显示图片_如何在react项目中引用图片？

如何在react项目中引用图片？本文码云笔记将为大家整理在react项目中插入图片以及背景图片的方法，希望对需要的小伙伴提供一些参考。

在react项目中插入图片以及背景图片的方法共有2种：

1、img标签引入图片

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

需要用下面的方式引入

2、背景图片引入

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

.img {

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

}

第二种就是在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() {

// 最后直接将变量赋值给标签

...

}

}

更多web前端知识，请查阅 码云笔记 mybj ！！