如何使用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

您可以使用element 的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