7
动态添加图像React Webpack
我一直在尝试找出如何通过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 父组件基本上只是一个容器,用于容纳子组件的倍数。 <ChildComponent img=data.img1 /> <ChildComponent img=data.img2 /> etc.... 有什么方法可以使用带有URL-loader的react和webpack来执行此操作,还是我走了一条错误的道路来实现这一目标?