Vue.jsのv-bindで画像を表示する時に画像パスの有無を判断して切り替える方法が知りたいです

Question

下記のコードで画像パスをv-bindで表示する時に、画像のパスがなければ、「noimage.jpg」という画像を表示したいのですが、エラーが出てしまいます。
解決策がわかる方がいらっしゃいましたら、教えていただきたいです。

<template>
  <div>
    <img :src="imgPass" @error="noImage" alt="" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: "1",
    };
  },
  computed: {
    imgPass() {
      return require("@/assets/" + this.img + ".jpg");
    },
  },
  methods: {
    noImage(e) {
      e.target.src = "@/assets/noimage.jpg";
    },
  },
};
</script>

Answer 1

下記で少し試してみましたが流れ自体は問題ないと思います。
noImageの処理がrequireされていなかったのでそちらが原因かと思われます。
https://codepen.io/masanori0209/pen/KKWGbXN

noImage(e) {
  e.target.src = require("@/assets/noimage.jpg");
},

Comments

[aki0412]

requireしたところうまくいきました！
ご回答ありがとうございます！

[m2l]

解決できて良かったです！