【Vue.js】画像データが404のとき代替画像を表示させたい

Question

実現したいこと

Vueで楽天APIを叩いて商品を表示させる機能を作っておりますが、取得した画像リンクがリンク切れを起こして404のときは、そのエラーをキャッチして代替画像を表示させるようにしたいですが、上手くいきません。

どなたかわかる方アドバイスを頂けますと幸いです。
よろしくお願いいたします。

こちらの記事を参考にしました。

該当のコード

<template>
  <figure class="image">
    <img :src="item.Item.mediumImageUrls[0].imageUrl" @error="altImg()" />
  </figure>
</template>

<script>
export default {
  props: {
    item: Object,
  },
  methods: {
    altImg() {
      this.item.Item.mediumImageUrls[0].imageUrl = require('../../../../assets/images/altImage.JPG')
    }
  }
}
</script>

試したこと

altImg()の中にdebuggerを入れて処理を止めてみようとしましたが、処理が止まりませんでした。
ですので、そもそも@errorで404エラーをキャッチ出来ていないのでは？と考えています。
@errorだけでは足りなく、エラーをキャッチするために何かまた別のコードが必要になるのでしょうか？

試しに、<img :src="require('../../../../assets/images/altImgae.JPG')">このように直接imgダグに代替画像のパスを貼ってみるとちゃんと表示することができたので、代替画像のパスの間違えではなさそうです。

Answer 1

有り得ない回答をしました。訂正いたします。
httpサービス(apache,nginx,IISなど)でエラーハンドリングされて、vueまでエラーが到達していないということはないでしょうか。

代替画像パスの設定ですが、require()を外してみてはどうでしょうか。

altImg() {
      this.item.Item.mediumImageUrls[0].imageUrl = '../../../../assets/images/altImage.JPG'
    }

今読んでいるvueの参考書で、同じくエラーで代替画像パスを設定する例が有りました。require()を使用していないようでした。

Answer 2

@errorじゃなくてv-on:errorで書いても取れないですかね？
参考のURLの中にある参考先ではv-on:errorで書いてます。

<img :src="item.Item.mediumImageUrls[0].imageUrl" v-on:error="altImg()" />

https://qiita.com/dskymd/items/d538fbd8b0429d7a49ea

Comments

[nomu_lui]

v-on:errorでも同じくキャッチできないです。
フレームワークでBuefyを使っているのですが、それが邪魔していたりする可能性もあるのでしょうか。

[sousuke]

代替の画像のURLが静的ならimgのonerrorで書いてみてはどうでしょうか？
<img :src="imgobj.src" alt="" :onerror="'this.src='+altImg()">
methodsのaltImgは文字列をreturnすればいいと思います。