🌐 vue 下载图片 📥

在使用 Vue 开发时，我们经常需要实现图片下载功能，但有时会遇到跨域问题，导致图片无法顺利下载。此时，可以借助前端技术巧妙解决！👀

首先，在 Vue 组件中获取图片链接后，可以通过 `axios` 或原生 `fetch` 方法请求图片数据，并设置响应类型为 `blob`：

```javascript

const response = await fetch('https://example.com/image.jpg');

const blob = await response.blob();

```

接下来，创建一个临时的 `` 标签并设置其 `href` 属性为下载链接，同时指定文件名：

```javascript

const url = window.URL.createObjectURL(blob);

const link = document.createElement('a');

link.href = url;

link.setAttribute('download', 'image.jpg'); // 自定义文件名

document.body.appendChild(link);

link.click();

link.remove();

```

💡 注意：如果图片来自不同域名（跨域），确保服务器端已配置 CORS 头部，允许跨域访问。否则，浏览器会阻止资源加载。此外，若图片体积较大，建议优化传输效率，避免影响用户体验。💪

用 Vue 实现这一功能并不复杂，只需结合前端 API 和 DOM 操作即可轻松搞定！🌟