网站首页编程语言正文

解决webpack打包后图片加载失败的bug（适用于所有本地静态资源）

作者：LangForOne 更新时间： 2023-10-27 编程语言

在这里插入图片描述
最左的图片是解决后加载成功的，另外三张是加载失败的。

原因：webpack把img当成是一种资源，所以使用时要先引进，给路径加上require()即可~

解决方法：
在这里插入图片描述数组的第一个对象的pic_url是加了require()的，第二个是没加的，对应最初那张页面效果。所以第一张能显示，第二到第四张加载失败。

在这里插入图片描述
上红框为能加载成功的图片的路径（打包到了dist目录下的assets静态资源文件夹下），下红框为加载失败的路径（依旧是本地的原路径）

全部url都加上require()，完工！（手动水印，哈哈）

原文链接：https://blog.csdn.net/vvv3171071/article/details/121020276