Vue.js / Nuxt.js在404上加载后备图片

Question

我试图设置默认图像（占位符图像），以防找不到图像资源（404）。我有一篇dict文章，其中包含关键author_image的值。因此该字符串不是空的，但无法加载该图像。

在我的模板中：

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

在我的方法中：

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

我可以在控制台日志中看到setFallbackImageUrl被调用，但是图像src没有更新。如果我只是在avatar.svg上方进行硬编码，则可以确保article.author_image实际上是正确的。

关于我可能做错了什么建议？

Answer 1

由于文件扩展名（.png，.svg等）不是模块请求（read more about handling assets with vue loader），因此通过vue loader和webpack加载图像时出现问题。

您需要将其包装在require中才能访问它。 @Toni Michel Caubet的示例起作用，因为他正在使用链接。

这对我有用。

*_dttm

注意：不需要将图像包装在“ $ {'avatar'+'.svg'}”中，我只是删除了动态值并添加了“ avatar”。