這個問題在這里已經有了答案： 如何在 Vuetify 的 v-img 中做后備 img？ (3 個回答) 17 小時前關閉。
我有一個使用 v-for 指令在 Vue3 中呈現的資料表行串列。在每一行中都有一個帶有指向在線影像的 src URL 的標記。每當影像 URL 損壞（影像不再存在）時，我希望 src URL 更改為默認值。
使用 jQuery，我可以執行以下操作：
$('img').on("error", function() {
$(this).attr('src', 'fallbackURL');
});
我如何在 Vue3 中做類似的事情？我正在尋找最簡單的解決方案，因為可能有很多行和許多損壞的影像 URL。我不介意保留這個 jQuery 解決方案，但我不知道如何在 Vue 中實作它。
非常感謝任何幫助！
uj5u.com熱心網友回復：
這種情況下不需要使用Vue，有一個原生的解決方案：
<img src="..." one rror="this.onerror=null; this.src='Default.jpg'" />
uj5u.com熱心網友回復：
您可以使用@error 這樣做，并在未找到或損壞影像的情況下放置所需的函式，然后將 src 更改為默認影像。
試試這個方法。
我將其用作默認影像 -> https://i.ibb.co/5908vXL/Screenshot-from-2021-06-15-11-13-44.png
<script src="https://unpkg.com/vue"></script>
<div id="app">
<img src="test.png" @error="imageLoadOnError"/>
</div>
<script>
new Vue({
el: '#app',
methods: {
imageLoadOnError(e) {
e.target.src = "https://i.ibb.co/5908vXL/Screenshot-from-2021-06-15-11-13-44.png"
}
}
})
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/348561.html
標籤：javascript 图片 Vue.js Vuejs3 源文件