使用create-react-app腳手架寫項(xiàng)目夏哭，遇到一個(gè)問題react引用本地圖片。從JSON文件中服球，讀取圖片路徑地址茴恰，在前端渲染。但是在ES6中不支持<img />中直接寫圖片路徑斩熊。
- 使用import引入
import img1 from '../assets/img/img1.jpg' //引入
···
<img src={img1} /> //使用
- 使用require引入
<img src={require('../assets/img/img1.jpg')} />
這種方式只能夠使用路徑地址不能夠使用變量往枣。
- 加載全部圖片路徑
const requireContext = require.context("../assets/img",true, /^\.\/.*\.png$/);
const projectImgs = requireContext.keys().map(requireContext);
在渲染的時(shí)候遍歷這個(gè)數(shù)組，如果存在這個(gè)數(shù)據(jù)粉渠，就選擇渲染分冈。
