Replace not found image in Vue

Posted on July 3, 2019

If you want to provide to the user a nicer image replacement than the browser not-found icon in Vue.js, here the way to go:

Assume you have this tag in yout component template:

<img :src="getImagePath" @error="fallback" />

Now you can exploit the error trigger to change a flag in order to provide a different path:

    fallback () {
    this.onErr = true
    return (this.onErr) ? 'placeholder_path' : 'some_image_path'

The downside of this method is that you see a little image swap during js evaluation. This can be mitigated using CSS hiding the img tag if it has errors.