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>

What do you mean "download it"? Why can't you right-click "Save image"? — connexo, Apr 10 '18 at 05:46
I want to have an onclick function either on the image or a button that can download the image instead. — Oluwagbemi Kadri, Apr 10 '18 at 05:51

score 7 · Answer 1 · answered Apr 10 '18 at 06:51

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

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

1 Answers1