正常情况下只需要传入图片路径就可以进行下载

  methods: {downs(path, name) {//必须同源才能下载var alink = document.createElement("a");alink.href = path;alink.download = name; //图片名alink.click();},},

但是当我们downs方法中直接传入"@/assets/load/xxx.png"这样的图片路径，是无法获取到图片资源的，必须传入 用require加载指定图片。例如

data() {return {loading: true,images: [require("@/assets/load/xxx1.png"),require("@/assets/load/xxx2.png"),],};},

那么在触发方法时

 <div@click="downs(images[0], '测试图片')">

传入一个require加载的图片就可以正常图片。

当然，如果是后端传过来的图片数据流，下载就简单很多。

methods: {async downloadImage() {try {const response = await fetch('https://example.com/image.jpg');const blob = await response.blob();// 创建一个URL对象，用于生成图片的临时链接const url = URL.createObjectURL(blob);// 创建一个a标签，模拟点击下载图片const link = document.createElement('a');link.href = url;link.download = 'image.jpg';document.body.appendChild(link);link.click();// 清理临时链接URL.revokeObjectURL(url);document.body.removeChild(link);} catch (error) {console.error('下载图片时出错：', error);}}
}