您可以通过使用 require.context() 创建一个新上下文来包含图像文件夹。从那里，您可以从该文件夹动态访问所需的图像，并将其设置为 src。

离开这样的结构：

APP
├──webpack.config.js
├──src
     ├──containers
        ├──YourContainer.js
     ├──components
        ├──YourComponent.js
├──public
     ├──bundle.js
     ├──images
           ├──dog.png
           ├──cat.png

在 YourContainer.js 中，您想创建一个新的上下文来要求该图像目录

const images = require.context('../../public/images', true);

从那里，您可以专门引用图像：

const dog = images('./dog.png');

或动态：

let animal = images(`./${someVariable}.png`);

一个更完整的例子，这里是你如何在迭代对象时执行它，使用键来拉你的图像，并将它作为样式props传递给子组件：

let YourContainer = ({ dispatch }) => {
const data = projectData["projectData"];

// Require context image folder
const images = require.context('../../public/images', true);


return (        
    <div className="container-fluid">
        <Row>
            {
                // Iterate over data object
                Object.keys(data).map((keyname, keyindex)=> {

                    let code = data[keyname]["code"];
                    let title = data[keyname]["title"];
                    // Dynamically reference image
                    // Set as inline style
                    // Pass as prop to child
                    let imgsrc = images(`./${code}.png`);

                    let styler = {
                        backgroundImage: `url(${imgsrc})`
                    }

                    return <YourComponent 
                                key={keyindex}
                                title={title} 
                                style={styler} 
                            />
                })
            }   
        </Row>      
    </div>  
)   
}

看到这个问题还没有回答，我也太在找答案了，

我遇到了一个使用 url 加载图像的绝妙技巧

假设您正在使用 create-react-app 插件

您可以使用公共文件夹动态渲染图像

例如，如果您在 React 应用程序的公共文件夹中放置了一个名为“image.jpg”的图像。

您可以通过执行以下操作来加载它

<img src={`${process.env.PUBLIC_URL}/image.jpg`} />

可以在下面找到更多信息。 https://create-react-app.dev/docs/using-the-public-folder

提及您拥有图像的图像文件夹路径。我在“SRC”文件夹下创建了文件夹。所以我保持我的代码如下。

let images = require.context('../../../assets/images', true);

let itemImg = images(`./${dynamicObject.photo}`).default;

默认是主要关键字。

问题

您遇到的问题是使用文件系统上的相对路径和操作类似但略有不同的 URL 路径混合使用本地“要求”样式。

例如：

require('./some-resource.x')

告诉构建系统在相对于当前文件的本地目录中查找文件。重要的一点是它是使用它的构建系统。

当你在一个 React 组件中，或者在浏览器中运行任何 javascript 时，没有本地磁盘的概念，只有它运行的页面/窗口上下文。

执行以下操作实际上是无效的：

require('/img/some_image.jpg')

也不

<img src="./img/some_image.jpg" />

因为第一个指的是文件系统的根，这不太可能是您想要的，第二个指的是浏览器并不真正支持的概念（免责声明：他们可能会使用它，我还没有测试过） .

我认为您的img目录可能与创建包的位置无关。

你该怎么办？

如果你遵循具有通常的结构public文件夹，那么也许images（或img你的情况），那么Web服务器将根据它的配置为公众服务的目录，这可能是http://server/public或者http://server/static甚至只是直接在根地址下的（http://server/）。

在 DOM 的上下文中，也就是上面提到的页面/窗口上下文，只有在当前位置、 sohttp://server/path/to/page/img/image.jpg或根位置引用图像才有意义。无论哪种方式，您都应该执行以下操作：

import React from 'react';

const Image = function statelessFunctionComponentClass(props) {

  let source = props.imageIsRelative ?
                 'img/' + props.imageSource :
                 '/img/' + props.imageSource;

  const style = {
    image : {
      width: '400pt',
      height: '400pt'
    }
  }

  return (
    <img src={source} role="presentation" style={style.image} />
  )
}

export default Image

请注意，区别只是/在前面，它指示路径是相对于当前页面还是相对于网络服务器的根目录。