arsro.net

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

#tech

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>

参考

最近のポスト