CODEWITHSUNDEEP
vuejs2vue-component
Rudra
Rudra

Reputation: 739

How to dynamically set the URL of a img src attribute from axios service call in Vue JS

I'm working on a requirement where I planned to dynamically set the URL on load of the component. I have a tag where the src attribute will be set from a service call which would return image. If the image is not present I need to set a fallback image. How can I handle this.

The image is in binary code format(.png) image

Upvotes: 1

Views: 202

Answers (1)

Jip Helsen
Jip Helsen

Reputation: 1356

I had a similar problem. This is my solution :

1)For the image you set a dynamic src like this :

< img :src="image" >

  1. In the data you set image to the url or relative path of the image you want to use as a default. Like this :

Data() { return { image : "path", } }

  1. You preload the default image your main html file, like this :

< link rel="preload" type="image" or type="img/png" href="path" >

  1. To change the image to the image in the axios call you just write :

this. image = messageImg

I hope this is helpfull.

Upvotes: 2

Related Questions