CODEWITHSUNDEEP
javascriptvue.js
Jishad
Jishad

Reputation: 163

vuejs v-html image tag not resolving src

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?

Upvotes: 1

Views: 5152

Answers (2)

Hossam
Hossam

Reputation: 123

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'>";

Upvotes: 3

Suprabha
Suprabha

Reputation: 545

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/

Upvotes: 0

Related Questions