显示图片 <img src='path' /> 在React中有一些问题

Question

我正在React中创建一个模板首页，我需要显示许多本地虚拟图像 。

在我的<Main />组件内部，我导入了其他组件，这些组件将图像路径作为参数传递，如下所示：

  <Container
    type="image"
    source=...
    message=""
    link="" />

由于我已经搜索并阅读了不同的答案，因此到目前为止，在React中我们不能仅仅使用<img src="relative image path" /> ，我不知道到底是什么问题，缓存对象/渲染对象等。

到目前为止，为了加载页面上的图像，我做了什么：
1.首先将它们import img1 from '../assets/img/hd1080.png'顶部： import img1 from '../assets/img/hd1080.png'
2.将图像传递到组件，如下所示：

<Container
    type="image"
    source={img1}
    message=""
    link="" />

3. 在内部，我将其传递给img，如下所示： <img src={img1} />

只是想知道是否有更快的方法，不需要先导入图像然后使用它们，即src="relative path"

Answer 1

在React中，您也可以使用图像的相对路径。

但是，考虑到您的问题，您可能需要Webpack来编译和捆绑资产。 “ Webpack方式”更喜欢对Webpack处理的所有内容进行编译。 这具有一些优点，例如能够通过Webpack插件优化和内嵌图像。

另一种方法是使用Webpack编译JS和CSS，然后将图像原样复制到“已编译的文件夹”中。

Webpack的开发服务器允许您根据需要执行此操作，有时它比让JS文件导入图像更容易，更有意义。

如果您的唯一目标是简单，那么导入就更简单-您不需要其他“文件复印机”脚本来进行文件编译，并且Webpack可以压缩或内联图像。

但是，如果导入每个图像都变得难以管理，请考虑制定一个简单的文件复制规则（例如，使用Makefiles），将文件复制到dist文件夹，然后简单地编写<Container source="/images/x.png"> 。

Answer 2

如果您要处理多个文件，那么我建议您制作一个单独的文件并导入其所有图像。 对于exp：

module.exports = {
    Slider_Arrow_Icon: {
       back_Arrow_Icon: require('../images/arrow-slide-back')
    }

}

然后导入此文件，您可以轻松使用。 如果有任何查询lmk。

希望这对您有用。