Vue.js/Nuxt.js Load Fallback Image on 404

Question

I am trying to set a default image (placeholder image) in case the image resource is not found (404). I have a dict article which has a value for the key author_image. So that string is not empty but it just can't load that image.

In my template:

<img
 :src="article.author_image"
 alt="Author Image"
 @error="setFallbackImageUrl"
>

In my methods:

methods: {
    setFallbackImageUrl(event) {
        console.log('Image failed to load, setting fallback.')
        event.target.src = '~/assets/icons/avatar.svg'
    }
}

I can see in my console log that setFallbackImageUrl is called but the image src is not updated. I made sure that the avatar.svg is actually correct, if I just hard code that over article.author_image that works.

Any suggestions on what I might be doing wrong?

Answer 1

The issue comes while loading your image via vue loader and webpack as the file extensions (.png, .svg, etc) are not module requests ( read more about handling assets with vue loader ).

You'll need to wrap it in the require to access it. the example by @Toni Michel Caubet works because he is using a link.

This Works for me.

methods: {
    setFallbackImageUrl(event) {
        console.log('Image failed to load, setting fallback.')
        event.target.src = require(`~/assets/icons/${'avatar' + '.svg'}`)
    }
}

Note: it's not needed to wrap the image in "${'avatar' + '.svg'}" i just removed my dynamic values and added "avatar".

Answer 2

Just in case someone is hitting a brick wall with webpack (files from assets/static) The accepted answer from here should resolve it:

Dynamic img src URL with "OR" statement not working properly in NUXT component