React 引入本地图片

1、使用import引入

import img1 from '../assets/img/img1.jpg'   //引入
···
<img src={img1} />   //使用

 

2、使用require引入

 

<img src={require('../assets/img/img1.jpg')} />
这种方式只能够使用路径地址不能够使用变量。

 

3、加载全部图片路径

const requireContext = require.context("../assets/img",true, /^\.\/.*\.png$/);
const projectImgs = requireContext.keys().map(requireContext);
在渲染的时候遍历这个数组，如果存在这个数据，就选择渲染。

 

4.使用require引入 变量

const images=require("../../static/img/"+this.state.img`);

<img src={images} />   //使用

 

this.state.src是带有后缀名的图片名称，我这里是写了个Img的组件，返回img的标签，
我这里使用require和传入的图片名称来动态的加载需要的图片。

 

 

文章参考：https://segmentfault.com/q/1010000009641349

                     https://www.jianshu.com/p/1a8f52acd92b