vue中a标签下载本地文件-未找到,原因及解决方法
a标签下载图片失败
·
错误代码
在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>
更多推荐
已为社区贡献1条内容
所有评论(0)