React 如何动态加载本地图片

react的标签是<img>,导入本地图片，可以用import加载

import React from 'react';
import testImgUrl from "../../images/1.png";
class App extends React.Component {
    constructor(props) {
        super(props);
     }
 
    render() {
       
        return (
         <div>
         <img src={testImgUrl}></img>
         </div>
        )
    }

}
export default App;

还可以用require

<img src={require("../../images/1.png")}></img>

试试网络上的图片

  <img src="http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg"></img>

将网络图片url定义成变量

const url = "http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg";

 <img src={url}></img>

到这里都没有什么问题，假如要加载本地图片，且require引入变量，如何实现

 <img src={require(`${url}`)}></img>

这个使用模板字符串可以拼接url

这么写会出错

Error: Cannot find module '../../images/1.png'

我用了各种方式，得出了结论，require无法使用变量。

那么就动态加载不了本地图片吗？

最后搜了一晚上，终于找到了方法

原文地址：https://www.coder.work/article/934601

let imgUrl = "../../images/1.png";
const reqSvgs = require.context('../../avatar/', true, /\.png$/);
const allSvgFilepaths = reqSvgs.keys();
const imagePath = allSvgFilepaths[0];
const image = reqSvgs(imagePath);
console.log(image);
this.state = {
url: image
};
<img src={this.state.url} ></img>

解释一下，核心是这个require.context函数，参数分别是图片所在目录，是否递归查询该目录下的所有目录，匹配文件的正则表达式

能搜到这个真的不容易