Vue js - Set alt image when image source not found

Question

I am working on a site which has a list of products. Each product has a corresponding image. I am binding the image url to the source attribute like below.

<img :src="product.ImageUrl"/>

If the image is not found, I want to show a default image.

I do as below in cshtml razor syntax (for reference only)

onerror='this.onerror = null;this.src = "@Url.Content("~/images/photo-not-available.jpg")";'

How do I achieve the same in Vue?

Answer 1

You can set an onerror handler function with @error in Vue:

<img :src="" @error="aVueFunctionThatChangesTheSrc">

Answer 2

Since in pure js put onerror inline like this

<img :src="ImgUrl" onerror="this.src='http://example.com/default.jpg'"/> 

for vue.js we can replace it

<img :src="ImgUrl" @error="$event.target.src='http://example.com/default.jpg'"/>