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

user_1809252 0
Viewed 98

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

vuejs2 vue-component
1 Answers

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.

user_150676230
Related