动态添加图像React Webpack

React.js

Eva斯丁

2020-03-16

我一直在尝试找出如何通过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....

有什么方法可以使用react和webpack以及url-loader来执行此操作,还是我走了一条错误的道路来实现这一目标?

第1657篇《动态添加图像React Webpack》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

0个回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android