require/import キーワードを使用して v-for ループでローカル画像をインポートするいくつかの方法

<div class="item" v-for="(item, index) in apiArr" :key="index">
    <!-- apiArr はバックエンドから返されるデータで、それぞれに画像の URL アドレスを格納する imgUrl 属性があります -->
    <img :src="item.imgUrl" alt="">
</div>

<テンプレート>
  <div class="wrap">
    <div class="item" v-for="(item, index) in apiArr" :key="index">
      <div class="imgWrap">
        <!-- require は画像ファイルモジュールを導入します -->
        <img :src="require(`@/assets/img/${item.imgTitle}.png`)" alt="" />
        <!-- 最終的にはこのようになり、正常に表示できるようになります <img src="@/assets/img/first.png" alt=""> -->
      </div>
      <div class="infoWrap">
        <div><span class="bloder">ランク:</span> {{ item.title }}</div>
        <div><span class="bloder">スコア:</span> {{ item.score }}</div>
      </div>
    </div>
    
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ（） {
    戻る {
      apiArr: [],
    };
  },
  マウント() {
    // apiArr はリクエストを送信したときにバックエンドから返されるデータであり、その中の imgTitle プロパティには画像の名前が格納されていると仮定します // require キーワードを通じてこれを導入すると、指定されたパスの下のファイルで対応する画像ファイルを自動的に検索してロードします this.apiArr = [
      {
        タイトル: 「チャンピオン」
        スコア: "98.8",
        imgTitle: "最初",
      },
      {
        タイトル: 「準優勝」、
        スコア: "97.9",
        imgTitle: "2番目",
      },
      {
        タイトル:「第3位」
        スコア: "96.2",
        imgTitle: 「3番目」、
      },
    ];
  },
};
</スクリプト>

<テンプレート>
  <div class="wrap">
    <div class="item" v-for="(item, index) in apiArr" :key="index">
      <div class="imgWrap">
        <img :src="item.imgTitle" alt="" />
      </div>
      <div class="infoWrap">
        <div><span class="bloder">ランク:</span> {{ item.title }}</div>
        <div><span class="bloder">スコア:</span> {{ item.score }}</div>
      </div>
    </div>
  </div>
</テンプレート>

<スクリプト>
// インポート import first from "@/assets/img/first.png";
「@/assets/img/second.png」から second をインポートします。
'@/assets/img/third.png' から third をインポートします。
エクスポートデフォルト{
  データ（） {
    戻る {
      apiArr: [
        {
          タイトル: 「チャンピオン」
          スコア: "98.8",
          imgTitle: first, // インポートした画像を使用する},
        {
          タイトル: 「準優勝」、
          スコア: "97.9",
          imgTitle: second, // インポートした画像を使用する},
        {
          タイトル:「第3位」
          スコア: "96.2",
          imgTitle: third, // インポートした画像を使用する},
      ]、
    };
  },
};
</スクリプト>