目录
1. 引入本地图片
普通引入，知道具体的地址
import myImg from '../asset/image/person.png'
export default Index(){
return (<img src={myImg} alt="图片"/>)
//##或者 这样 <img src={require('../asset/image/person.png')} alt="图片"/>
};2.引入动态的图片地址
2.1.直接使用传递过来的地址
如果你动态传递过来的图片地址就是一个网络地址，比如：如下。那么直接使用就完事了（当然有可能直接用了在调试模式下不显示，这时候你可以打包项目，在index.html下看看有没有显示，一般是能正常显示的）
let myImgs = [
{name: 'item1',imgUrl: 'http://api/img/person.png'},
{name: 'item2',imgUrl: 'http://api/img/cap.png'},
{name: 'item3',imgUrl: 'http://api/img/desk.png'},
]2.2. 使用跟本地对应的动态图片名称
通过require.context()实现引用
require.context(directory,useSubdirectories,regExp)
- directory:表示检索的目录
- useSubdirectories：表示是否检索子文件夹
- regExp:匹配文件的正则表达式,一般是文件名
比如是接口传递过来的一个图片名称组
/*
这种情况，接口只给了图片名称，图片在本地且图片名称需要跟传递过来的imgUrl名称对应（就算不对应那也得有点相似的地方方便你查找图片啊，不然你总不能通过意念去找吧）
*/
let myImgs = [
{name: 'item1',imgUrl: 'person.png'},
{name: 'item2',imgUrl: 'cap.png'},
{name: 'item3',imgUrl: 'desk.png'}]
const reqSvgs = require.context('../asset/image', true, /\.png$/);
const allSvgFilepaths = reqSvgs.keys();
//过滤之后的文件名称组，具体格式可以自行打印看看，在跟数据相对应来做处理
//console.log(reqSvgs,'--reqSvgs');
// console.log(allSvgFilepaths, '--allSvgFilepaths');//测试1 代码接上面
const path = allSvgFilepaths[allSvgFilepaths.length - 1];//取最后一张图片地址
const imgage = reqSvgs(path).default;//我这里图片在 reqSvgs(path).default 我看到的一篇文章中那位大佬好像是reqSvgs(path)可以直接拿到，大家可以自己打印看看再去具体引用
// console.log(imgage, '--imgage');
<img src={image} alt="图片"/>
//测试2 代码接上面
<div>
{
myImgs.map(item => {
//判断一下本地有没有这张图片
if(~allSvgFilepaths.findIndex(x=>x===`./${item.imgUrl}`)){
let iUrl =reqSvgs(`./${item.imgUrl}`).default;
return iUrl&&<img src={iUrl} alt={item.name} key={item.name}/>
}
})
}
</div>
//正确输出图片通过直接使用public文件夹下的图片
如果上面这种不想用，且你的图片放在了 public 资源文件夹下面，那么你也可以通过相对路径的方式使用图片（打包之后./指向public文件夹下），打包之后因该是也能访问到的
return (<img key={'item' + index} className="scenic-img" src={'./assets/icon/' + item.trim() + '.png'} />)参考
完。