错误代码

在vue项目中下载本地图片资源时失败并显示未找到,项目中代码为:

<a href="../../assets/bg.png" download="bg">
  <img src="../../assets/bg.png"></img>
</a>

原因:

执行npm run serve 之后,在浏览器的调试工具下看a标签和img标签的代码为:

<a href="../../assets/bg.png" download="bg">
  <img src="/img/bg.png"></img>
</a>

会把图片资源放入/img文件下,也就是说上面的bg.png的在项目运行后真实路径为http://localhost:8080/img/bg.jpg,故a标签的href有误,提示找不到文件,下载失败。
需要注意的是,如果图片大小小于4k,会直接把文件转为为base64文件,并放入css文件中,不会像上述图片一样,解析后放入/img下面。

解决:

在href里面写npm run serve命令运行后的图片路径:

<a href="/img/bg.png" download="bg">
  <img src="../../assets/bg.png"></img>
Logo

前往低代码交流专区

更多推荐