react项目中引入图片的方法有哪些

这篇文章主要介绍了react项目中引入图片的方法有哪些，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

img标签引入图片

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

我们可以像引入模块一样引入图片

import img from &＃39;./../../../../asset/img/user.png&＃39;

需要用下面的方式引入

背景图片引入

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

.img {
   background: url(&＃39;../images/picture.png&＃39;) 0 0 no-repeat;
}

2 第二种就是在react组件中通过变量的方式引入,然后直接将变量赋值给img标签

// 引入图片文件
import bg from &＃39;../images/bg.png&＃39;
// 通过字符串拼接的方式定义一个样式对象
const imgStyle = {
  width: &＃39;100%&＃39;,
  height: &＃39;500px&＃39;,
  backgroundImage: &＃39;url(&＃39; + bg + &＃39;)&＃39;,
  backgroundPosition: &＃39;center 0&＃39;,
  backgroundSize: &＃39;2045px 472px&＃39;,
  backgroundRepeat: &＃39;no-repeat&＃39;
}
class Home extends Component {
 constructor () {
  super (props)
 }
 render() {
  // 最后直接将变量赋值给标签
  
   ...