正常情況下只需要傳入圖片路徑就可以進行下載

  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);}}
}