I'm currently working on implementing a default image (placeholder image) for situations where the desired image resource is not found (404 error). I have a dictionary called article which contains a value under the key author_image. Although the string is not empty, the image fails to load.
In my template:
<img
:src="article.author_image"
alt="Author Image"
@error="setFallbackImageUrl"
>
Within my methods:
methods: {
setFallbackImageUrl(event) {
console.log('Image failed to load, setting fallback.')
event.target.src = '~/assets/icons/avatar.svg'
}
}
Even though the console log confirms that setFallbackImageUrl is being triggered, the image src remains unchanged. I've verified that the avatar.svg path is correct, as manually setting it works rather than relying on article.author_image.
Do you have any suggestions on what mistake I might be making?