Vue.jsの動的画像表示機能が失敗する

Question

私は vue.js の初心者で、画像を動的に表示しようとしていますが、動的表示に問題があります。手動で変更すると正常に機能します。いくつかの違いはあるものの、似たような質問をたくさん見つけましたが、どれも役に立ちませんでした。

これは私の構造です:

-src
  --assets
     - -ピザ
      ----ピザ-1.jpg
      ----ピザ-2.jpg
     - -ハンバーガー
      ----ハンバーガー-1.jpg
      ----ハンバーガー-2.jpg
     - -フライドポテト
      ----フライドポテト-1.jpg
      ----フライドポテト-2.jpg
 --コンポーネント
 --DBjson
   ---main.json

次のループを作成しようとしています:

`<div class="holder" v-for="レストラン内のレストラン">
  <img :src="getImage(レストラン名, レストラン.メインイメージ)"/>
 </div>

  デフォルトのエクスポート {
名前：「レストラン」、
データ（） {
    戻る {
        restInfo: this.$attrs.restData,
    };
}、
メソッド: {
    getImage(フォルダ名, 画像名) {
        let image = require.context("@/assets/");
        return image("./" フォルダ名 "/" 画像名);
    }、
 }、
};`

私の JSON ファイル:

{
    「id」: 1、
    "名前": "ピザ",
    "価格": "10ドル",
    "mainImage": "ピザ-1.jpg",
    "画像": ["ピザ-2.jpg", "ピザ-1.jpg"],
},

Answer 1

getImage は、完全な相対ファイル パスを使用して画像を要求し、返す必要があります

Vue 2.x

リーリー

Vue 3.x Vite

私の知る限り、Vite はこの特定のタスクの「@」エイリアスを処理できないため、それに応じてパスを設定するようにしてください

リーリー