使用create-react-app脚手架写项目,遇到一个问题react引用本地图片。从JSON文件中,读取图片路径地址,在前端渲染。但是在ES6中不支持中直接写图片路径。
1.使用import引入
import img from '../assets/images/img.png' //引入
<img src={img} /> //使用
2.使用require引入
<img src={require('../assets/images/img.png')} />
这种方式只能够使用路径地址不能够使用变量。
3.加载全部图片路径
const requireContext = require.context("../assets/images",true, /^\.\/.*\.png$/);
const projectImgs = requireContext.keys().map(requireContext);
在渲染的时候遍历这个数组,如果存在这个数据,就选择渲染。