时间戳

首页 > 解决方案 > 在 Webpack 中包含 JSX 中引用的图像资产

reactjs - 在 Webpack 中包含 JSX 中引用的图像资产

问题描述

是否可以让 Webpack 在构建包中包含图像资产，而无需：

  1. 为特定资源使用 import 语句（可以使用Webpack 5 中的Asset Modules完成）
  2. 不将其作为 src 属性写入静态 HTML 文档（可以使用HtmlWebpackPlugin完成）

我会有一些引用图像资源的 React JSX 代码，或者作为元素中的src属性<img>，或者有一些资源字符串，比如var imgUrl = './Assets/img.svg'，以及稍后使用这个字符串作为属性的一些元素。

目前我可以手动将整个/Assets文件夹复制到/dist中，但我会有未使用的资源，/Assets并希望 Webpack 找出实际使用的资源。

标签： reactjswebpack

解决方案

哦，现在我明白了，不幸的是，这是不可能的。 React不会检测src图像的值，因为它会认为它只是一个string，而不是一个路径。它不会弄清楚你在说哪个文件。以您想要的方式使用它的唯一方法是将这些图像放在public文件夹中，您说您不想这样做。

在我个人看来，如果应用程序很小，我通常对静态图像执行的操作是将它们全部放在一个文件中，方法是导入它们并导出一个包含所有它们的对象。最后，每次我想使用任何图像时，我只需导入该文件并使用我想要的任何图像。使用这种方法，最终我会得到一个文件（包）。这只是一种方法，有很多不同的方法可以做到这一点，但它与案例有关

推荐阅读