无法在React + Webpack

Question

我无法使用this.props在React + Webpack中动态传递相对img src路由。

这是父组件的一个非常简化的部分。它迭代一些数据列表并生成传递道具的ImgComponents。这只是其中的一小部分：

return (
      <div>
        <ImgComponent srcProp={videolist.anotherImage.src} />
      </div>
    );

ImgComponent有：

render() {
    return (
      <div>
          <img src={`${this.props.srcProp}`} />
      </div>
    );
  }

在控制台中，我得到与我传递this.props.srcProp完全相同的路线，但它找不到文件夹和img。好像webpack没有加载img。 这是控制台：

<img src="framework/assets/images/cover-bigbuckbunny.png" class="_2WcF9ZmcK-9bQX6jKk18Y_" data-reactid=".0.1.1:$comedy.0.0.$0.0.0.0">

无论我指明什么路线，都不会在文件夹中找到img。

这是png的webpack配置：

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

顺便说一句。如果我需要该文件，它可以正常工作，如：

<img src={require ('framework/assets/images/cover-bigbuckbunny.png')} />

或表示某些远程路线，例如http://route.to.some.img

似乎webpack没有加载它。如何通过使用{this.props.src}动态传递src来动态加载本地img文件？正如我所看到的，如果我用require指示文件，加载程序会加载img。但是这种方式我不能动态地做，因为需要不带变量。

Answer 1

Webpack不会遍历您的代码来查找和转换所有可能的文件引用。

请考虑以下代码：

<img src={'/foo/bar/baz.jpg'} />

您有责任（可能使用构建目标）确保将baz.jpg复制到您的Web应用程序根目录下的foo/bar目录中。