Nuxt.js+Vuetify で 画像が表示できない時に固定の画像を出す方法

はじめに

最近Nuxt.js を触り始めて、Typescript までたどり着くことを目標に学習始めました。

やりたいこと

あるページで、サーバから指定された画像を表示しますが、それが存在しない時はフロントサイドで持っている情報で固定画像を表示したいです。

試したやりかた

page.vue

<img :src="response.img" @error="errImg">
...
methods:
  errImg(event) {
    event.target.src = 'no_image.jpg' // static/no_image.jpg に正しく表示できる画像ファイルがある
  } 

このやり方だと。。。

404 エラーの時に、error が発火しない。

• response.img=存在しない画像 の場合、no_mage.jpg　が表示されました
• http://example.com/test.jpg の場合には何も表示されませんでした
  • errImg() に、console.log() を仕込んだけど何も出力されませんでした

参考：https://ja.stackoverflow.com/questions/66720/nuxt-js%E3%81%A7%E7%94%BB%E5%83%8F%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF%E6%99%82%E3%81%AB404%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E7%99%BA%E7%94%9F%E3%81%97%E3%81%9F%E9%9A%9B%E3%81%AB%E4%BB%A3%E3%82%8F%E3%82%8A%E3%81%AE%E7%94%BB%E5%83%8F%E3%81%AB%E5%B7%AE%E3%81%97%E6%9B%BF%E3%81%88%E3%81%9F%E3%81%84

解決策

page2.vue

<v-img :src="showImage(response)" @error="errorImage">
...
data() {
  return {
    isImgFailed: false
  }
},
methods:
  showImage(response) {
    return this.isImgFailed ? 'no_image.jpg' : response.img
  },
  onImgError() {
    this.isImgFailed = true
  }

参考：https://stackoverflow.com/questions/53215071/how-to-do-a-fallback-img-in-v-img-in-vuetify