Vue.jsでjsonファイルに保存した画像URLを取得して、v-forで表示させたいです。

Question

前提・実現したいこと

Vue.jsでjsonファイルに保存した画像URLを取得して、v-forで表示させたいです。

発生している問題・エラーメッセージ

Error: Cannot find module '@/assets/images/member1.png'"

該当のソースコード

[
  {
    "image": "member1.png",
    "information": ""
  },
  {
    "image": "member2.png",
    "information": ""
  },
  {
    "image": "member3.png",
    "information": ""
  },
]

<div
  v-for="(item, i) in members"
  :key="i"
>
  <v-avatar class="avator">
  <img
    :src="getUrl(item.image)"
  >
  </v-avatar>
</div>

methods: {
 getUrl: function (url) {
   let img = '@/assets/images/' + url
   return require(img)
 }
}

試したこと

純粋にrequire('@/assets/images/member1.png')を読み込んだときは問題なく表示されるためパスはあっています。
requireをつけない場合も試しましたが取得できません。

画像を表示させる方法を教えて頂けないでしょうか。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[退会済みユーザー]

https://cli.vuejs.org/guide/html-and-static-assets.html#url-transform-rules

によると

If the URL starts with @, it's also interpreted as a module request. This is useful because Vue CLI by default aliases @ to <projectRoot>/src. (templates only)

とあるので、少なくともtemplate部分ではなくscript部分にある文字列は影響しないと思います。
ご参考までに。

Answer 1

ご質問拝見いたしました。

プロジェクト直下のpublicフォルダに画像を配置するのはいかがでしょうか？
publicフォルダにimagesフォルダを作成し、表示可能です。

プロジェクト
 ∟ public // こちらにimagesフォルダおよび配下に画像を配置
 ∟ src
 ...以下略

関数は以下のようになります。

  methods: {
    getUrl: function (url) {
      return `/images/${url}`;
    }
  }

ご参考になれば幸いです。

Comments

[mmmn]

ありがとうございます。
publicフォルダに格納することで表示できました！