无法在 React + Webpack 中传递相对 img src 路由

Posted 2023-02-22

【中文标题】无法在 React + Webpack 中传递相对 img src 路由

【英文标题】：Can't pass relative img src route in React + Webpack

【发布时间】：2016-07-28 15:41:26

【问题描述】：

我无法使用 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很好。但是这种方式我不能动态地做到这一点，因为 require 不接受变量。

【参考方案1】：

我设法做的是对象中的require('../../assets/images/myFirst.img')，其中包含到本地存储文件的路由：

在playlist.js

export default (
  
    cartoons: [
        images: 
        poster: require('../../assets/images/myFirst.png')
      ,
      streams: [
        type: 'mp4',
        url: 'http://media.w3.org/2010/05/bunny/movie.mp4'
      ]
    );

然后我像处理任何对象一样使用此列表：

import playlist from '../../playlist';

并以通常的方式迭代此对象。图像将在那里。

【讨论】：

如果这些url来自db怎么办？

我没有尝试这个。如果我可以尝试，我想会回答它，但我现在离它还很远。

感谢您的回复。我尝试导入整个文件夹并且它有效:)

【参考方案2】：

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

考虑以下代码：

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

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

【讨论】：

感谢您的快速回复，艾米。是不是意味着我没有办法做到 ？

即使我写 并确保文件在文件夹中，它也不会被看到。尝试了所有可能的路线。似乎内联的 src 不起作用。不知道该怎么办。

我想通了并给出了答案。