vue中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>