Webpack 5中动态设置图片src出现404问题求助

Webpack 5打包时会自动处理HTML的src属性和CSS的url()里的资源路径——它会把这些图片复制到输出目录（一般是dist），并替换路径为打包后的正确地址。但JS里的字符串路径属于纯文本，Webpack不会对它做任何解析转换。你直接写相对路径的话，浏览器运行时会以当前页面URL为基准去请求，这个路径和打包后图片的实际位置不匹配，自然就404了。

分两种场景处理：

场景1：加载项目内的静态图片（不想用import） #

1. 把静态图片放到项目根目录的public文件夹里（没有就自己建），Webpack会把这个目录下的文件原封不动复制到输出目录的根目录。
2. 设置图片路径时用网站根目录的绝对路径，比如：

   // index.js
   initialize([
     {
       src: "/images/your-image.jpg" // 假设public下有images子文件夹，图片存在这里
     }
   ]);
   

   这样浏览器会直接从网站根目录找资源，和Webpack复制后的路径完全匹配。

场景2：加载数据库/用户上传的图片 #

1. 让后端返回完整可访问的URL（比如https://your-domain.com/uploads/user-123.jpg），或者返回相对于后端服务的绝对路径（比如/uploads/user-123.jpg）。
2. 如果是前后端分离部署，要在webpack.config.js里配置publicPath，确保前端资源的基础路径正确：

   module.exports = {
     // ...其他配置项
     output: {
       publicPath: "/" // 部署在子目录的话就改成对应路径，比如"/blog/"
     }
   };
   

   这样动态设置的路径会基于正确的基础路径发起请求。

内容的提问来源于stack exchange，提问作者54935