[Nuxt.js] 画像の読み込みに失敗したときに、no-image系の画像で補完する

Date
Oct 11, 2020
imgタグにはonerror属性があって、srcの読み込みに失敗した際に代替用の画像をonerrorに設定しておくことができます。
こんな感じで。
<img
 src="表示したい画像のurl"
 onerror="this.src='読み込み失敗時の代替画像のurl';"
/>
これと同じようなことをNuxt.jsでやるときのメモ。
errorイベントが画像のsrcの上書きをする感じですね。
<template lang="pug">
 div
   img(:src="imageUrl" @error="changeNoImage()")

</template>


<script>
export default {
 methods: {
   changeNoImage() {
     // エラーが発生したらimageUrlを置き換える。this.imageUrl = require('~/assets/images/no-image.jpg');
   }
 }
}
</script>
参考