vue 下载图片

在Vue中，可以通过使用axios或fetch等方式来下载图片。以下是一个使用axios下载图片的示例：

首先，在项目中安装axios：

npm install axios

在Vue组件中引入axios：

import axios from 'axios';

创建一个方法来下载图片：

methods: {
  downloadImage() {
    axios({
      url: 'https://example.com/image.jpg', // 图片的URL
      method: 'GET',
      responseType: 'blob', // 设置响应类型为blob
    }).then(response => {
      const url = window.URL.createObjectURL(new Blob([response.data])); // 创建一个URL对象
      const link = document.createElement('a'); // 创建一个a标签
      link.href = url; // 设置a标签的href属性为URL对象
      link.download = 'image.jpg'; // 设置下载的文件名
      link.click(); // 模拟点击a标签进行下载
      window.URL.revokeObjectURL(url); // 释放URL对象
    });
  }
}

在Vue模板中添加一个按钮，绑定下载图片的方法：

<template>
  <div>
    <button @click="downloadImage">下载图片</button>
  </div>
</template>

这样，当用户点击按钮时，就会下载指定URL的图片。请将https://example.com/image.jpg替换为实际的图片URL。