[Nuxt.js] 画像の読み込みに失敗したときに、no-image系の画像で補完する
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>参考
