如何使用 VueJS 从 axios 数据响应中下载图像 url答案

【问题标题】：How do I download an image url from axios data response using VueJS如何使用 VueJS 从 axios 数据响应中下载图像 url
【发布时间】：2018-09-19 15:00:22
【问题描述】：

在我使用 Vue 循环浏览前端中的数据后，我能够显示图像，但我不知道如何下载它。我希望能够单击图像或其他按钮以下载图像。

<ul>
   <li v-for="data in mydata" :key="data.id">
      <img :src= "data.url" alt="image" class="img-thumbnail"/>
    </li>
</ul>

【问题讨论】：

“下载”是什么意思？为什么不能右键“保存图片”？
我想在图片上或者是一个可以下载图片的按钮上都有一个onclick功能。

标签： vue.js vuejs2 vue-component axios vue-resource

【解决方案1】：

你可以使用<a>元素的download属性：

<li v-for="data in mydata" :key="data.id">
  <a :href="data.url" download>
    <img :src="data.url" alt="image" class="img-thumbnail"/>
  </a>
</li>

但请注意，IE 和 Safari 不支持download
https://caniuse.com/#feat=download

【讨论】：