Question

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

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

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

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

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

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

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

Answer 1

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

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

另一种方法是编译你的JS＆amp;使用Webpack的CSS，但将图像按原样复制到“编译文件夹”。

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

如果您的唯一目标是简单，那么导入更简单 - 您不需要另一个“文件复制器”脚本来进行文件编译，而Webpack可以压缩或内联您的图像。

但是，如果导入每个图像变得很难管理，可以考虑制作一个简单的文件复制规则（例如Makefile），将文件复制到dist文件夹，只需编写<Container source="/images/x.png">。

Answer 2

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

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

}

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

希望这有用。