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

Question

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

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

Answer 1

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

<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