React(webpack)项目动态加载图片

项目中有根据配置或其他需求，需要使用动态图片的，可以配合webpack来使用。具体原理我大概也是半懂半知，先上code

const _assets: __WebpackModuleApi.RequireContext = require.context(resRootPath);
/** *  根据资源名动态获取图片对象 * @param name  */export const getImg = (name: string): string => {  const key = "./" + name;  return _assets.keys().includes(key) ? _assets(key) : name;};

这里resRootPath就是项目（或页面）资源的根目录（具体定义也可以根据需要定位路径），例如 "../assets/images/"

原理大概就是利用webpack打包原理，将图片打包生成一个图片的路径map，在使用图片的时候，webpack就会查找对应的图片真正地址了。