CODEWITHSUNDEEP
vue.jsvuejs2vue-componentaxiosvue-resource
Oluwagbemi Kadri
Oluwagbemi Kadri

Reputation: 469

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

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>

Upvotes: 5

Views: 4092

Answers (1)

CodinCat
CodinCat

Reputation: 15924

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

Upvotes: 7

Related Questions