vuejs v-html image tag not resolving src

Question

I have a vue page which uses v-html to place an html content inside a <div> as follows:

<div v-html="noDataMessage">               
</div>

And the data of noDataMessage is set in created() lifecycle hook of vue.

created() {  
   this.noDataMessage = "<img src='../assets/Content/img/Myfav_empty.png' width='35px' height='35px'>";
}

The html tag is showing properly, but it is not able to fetch the image. I tried to load the image separately to see if image path is correct, and got the image.

Am I missing anything particular to vue.js or v-html in particular?

If you look at this fiddle it seems to work fine. I think the issue is in fact in your path. Edit: Perhaps take a look at this link which might solve your issue — T. Dirks
– T. Dirks, Commented Dec 5, 2018 at 8:35
Look in your browser console's network tab to see if the request for the image is being made or not, and if it is, whether it's failing due to a 404 error, in which case, as the previous commenter suggested, your path would be wrong — Dexygen
– Dexygen, Commented Dec 5, 2018 at 8:37
Instead of this path ../assets/Content/img/Myfav_empty.png, try this one @/assets/Content/img/Myfav_empty.png, or this one ~@/assets/Content/img/Myfav_empty.png — user9805590
– user9805590, Commented Dec 5, 2018 at 9:22

Hossam · Accepted Answer · 2018-12-05 08:46:00Z

3

The issue is in the src url you are using, the src url root is the public directory.

For example, if you have all your images in public->images directory then your code will look like this:

this.noDataMessage = "<img src='images/Myfav_empty.png' width='35px' height='35px'>";

answered Dec 5, 2018 at 8:46

Hossam

1236 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jishad Over a year ago

This has solved the issue. But I wonder, what would someone do if relative path is to be specified?

Hossam Over a year ago

Could you tell me an example to the relative path you want, because if the relative path is outside the public directory then it won't work with this way.

Suprabha · Accepted Answer · 2018-12-05 08:34:16Z

0

It seems perfect only.

I have implemented the same way to fetch the image, Here I can see the image. Please check the path once again.

You can check below example where I have tried to implement same way :http://jsfiddle.net/suprabhasupi/eywraw8t/491005/

answered Dec 5, 2018 at 8:34

Suprabha

5454 silver badges8 bronze badges

Collectives™ on Stack Overflow

vuejs v-html image tag not resolving src

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related