Vue.js/Nuxt.js 在 404 上加載回退圖像

Question

我正在嘗試設置默認圖像（占位符圖像）以防找不到圖像資源（404）。 我有一篇字典文章，它對鍵 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

通過 vue loader 和 webpack 加載圖像時出現問題，因為文件擴展名（.png、.svg 等）不是模塊請求（ 閱讀有關使用 vue loader 處理資產的更多信息）。

您需要將其包裝在 require 中才能訪問它。 @Toni Michel Caubet 的示例之所以有效，是因為他使用了鏈接。

這對我有用。

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

注意：不需要將圖像包裝在“${'avatar' + '.svg'}”中，我只是刪除了我的動態值並添加了“avatar”。

Answer 2

以防萬一有人用 webpack（來自資產/靜態文件）撞牆 從這里接受的答案應該解決它：

帶有“OR”語句的動態 img src URL 在 NUXT 組件中無法正常工作