图像不会在 webpack 构建中加载

Question

滑块.js

...
const initialize = (pImages) => {
  pImages.forEach((image) => {
    const sliderItem = document.createElement("img");
    sliderItem.src = image.src; // this line result in 404 not found in dev tool
    ...
  })
}
...

index.js

...
initialize(
  {
    src: "image relative path here";
  }
);

我使用 webpack 5，我可以通过 html 文件中的 src 属性和 css 文件中的 url("") 加载图像......但不能在 js 中加载此动态路径。谁能告诉我原因以及如何解决？

我不想使用

import someimage from "some image path"

，因为我希望这是动态的，这样我就可以使用数据库中的图像或用户上传的图像。

Answer 1

将图像放置在项目根目录的公共文件夹中，并按如下方式访问它：

const initialize = (pImages) => {
  pImages.forEach((image) => {
    const sliderItem = document.createElement("img");
    sliderItem.src = `/images/${image.src}`;  
    ...
  });
};

webpack 无法自动解析在运行时动态设置的路径，因为这些路径在构建过程中是未知的，因此会导致 404

Answer 2

如果图像未在 Webpack 构建中加载，可能是由于路径配置不正确、缺少文件加载器配置或在生产模式下处理资源的方式存在问题。确保图像已正确导入，并且文件加载器规则（如 file-loader 或 url-loader）已在 Webpack 配置中正确设置。另外，请检查图像路径是否相对于构建输出目录，以及它们是否与代码中引用资产的方式匹配。如果您使用动态导入，请确保 Webpack 正确解析它们。此外，通过检查生成的文件来确认图像包含在构建输出中。