大佬教程收集整理的这篇文章主要介绍了动态添加图像React Webpack，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
使用此处描述的url-loader（SurviveJS-加载图像），然后可以在代码中使用：
import logoimg from 'YOUR_PATH/logo.png';
和
<img src={logoimg}/>
编辑：精确地说，使用此技术将图像内联到Js档案中。对于较小的图像可能值得，但请明智地使用该技术。
我一直在尝试找出如何通过React和Webpack动态添加图像。我在 src / images 下有一个图像文件夹， 在 src /
components / index 下有一个组件。我正在将url-loader和以下配置用于webpack
{
test: /\.(png|jpg|)$/,loader: 'url-loader?limit=200000'
}
在组件内，我知道可以在创建组件之前在文件顶部为特定图像添加 require（image_path）
，但我想使该组件通用，并使其具有一个属性，该属性具有从中传递的图像的路径父组件。
我试过的是：
<img src={require(this.props.img)} />
对于实际属性，我尝试了几乎所有可以想到的从项目根目录，反应应用程序根目录以及组件本身到图像的路径。
文件系统
|-- src
| ` app.js
| `--images
| ` image.jpg
| ` image.jpg
| `-- components
| `parent_component.js
| `child_component.js
父组件基本上只是一个容纳子对象倍数的容器，因此&Hellip;
<ChildComponent img=data.img1 />
<ChildComponent img=data.img2 />
etc....
有什么方法可以使用带有URL-loader的react和webpack来执行此操作，还是我走了一条错误的道路来实现这一目标？
以上是大佬教程为你收集整理的动态添加图像React Webpack全部内容，希望文章能够帮你解决动态添加图像React Webpack所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。