How do I download an image url from axios data response using VueJS

Question

After I loop through the data in the front-end with Vue I am able to display the images but I do not know how to download it. I want to be able to click on either the image or a button in other to download the image.

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

Answer 1

You can use the download attribute of <a> element:

<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>

But note that IE and Safari don't support download
https://caniuse.com/#feat=download