加载本地图片"/>
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=".jpg"></img>
将网络图片url定义成变量
const url = ".jpg";<img src={url}></img>
到这里都没有什么问题,假如要加载本地图片,且require引入变量,如何实现
<img src={require(`${url}`)}></img>
这个使用模板字符串可以拼接url
这么写会出错
Error: Cannot find module '../../images/1.png'
我用了各种方式,得出了结论,require无法使用变量。
那么就动态加载不了本地图片吗?
最后搜了一晚上,终于找到了方法
原文地址:/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函数,参数分别是图片所在目录,是否递归查询该目录下的所有目录,匹配文件的正则表达式
能搜到这个真的不容易
更多推荐
React 如何动态加载本地图片
发布评论