Vue-cli图片资源无法显示的原因及解决方案

vue

由于Webpack在打包时,默认静态图片会被打包成base64编码格式,导致打包生成的路径与图片名(带hash值)和开发时放置的位置与名称并不一致。发生以下类似轮播图片无法显示的问题。比如:


开发时,如果静态配置页面图片位置,webpack在打包时会自动识别,并正确处理为以下网页实际路径:

但当我们使用v-if等指令,动态创建图片时,效果就不理想了


最终页面并不会显示图片内容,原因在于图片路径并没有取打包后的资源路径。

为了解决这个问题,我们可以用以下方式,指定data中资源的路径。

以上是 Vue-cli图片资源无法显示的原因及解决方案 的全部内容, 来源链接: utcz.com/z/377767.html

回到顶部