Mehrere Möglichkeiten zur Verwendung von require/import-Schlüsselwörtern zum Importieren lokaler Bilder in einer v-for-Schleife

<div Klasse="Artikel" v-for="(Artikel, Index) in apiArr" :Schlüssel="Index">
    <!-- apiArr sind die vom Backend zurückgegebenen Daten, von denen jedes ein imgUrl-Attribut hat, das die URL-Adresse des Bildes speichert -->
    <img :src="item.imgUrl" alt="">
</div>

<Vorlage>
  <div Klasse="wrap">
    <div Klasse="Artikel" v-for="(Artikel, Index) in apiArr" :Schlüssel="Index">
      <div Klasse="imgWrap">
        <!-- require führt das Bilddateimodul ein -->
        <img :src="require(`@/assets/img/${item.imgTitle}.png`)" alt="" />
        <!-- Schließlich sieht es so aus und kann normal angezeigt werden <img src="@/assets/img/first.png" alt=""> -->
      </div>
      <div Klasse="infoWrap">
        <div><span class="bloder">Rang:</span> {{ item.title }}</div>
        <div><span class="bloder">Punktzahl:</span> {{ item.score }}</div>
      </div>
    </div>
    
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      apiArr: [],
    };
  },
  montiert() {
    // Angenommen, apiArr sind die Daten, die vom Backend zurückgegeben werden, wenn wir die Anfrage senden, und die Eigenschaft imgTitle darin speichert den Namen des Bildes. // Durch die Einführung über das Schlüsselwort require wird automatisch nach der entsprechenden Bilddatei in der Datei unter dem angegebenen Pfad gesucht und geladen. this.apiArr = [
      {
        Titel: "Champion",
        Punktzahl: "98,8",
        imgTitle: "erste",
      },
      {
        Titel: „Zweiter“,
        Punktzahl: "97,9",
        imgTitle: "zweite",
      },
      {
        Titel: „Dritter Zweitplatzierter“,
        Punktzahl: "96,2",
        imgTitle: "dritte",
      },
    ];
  },
};
</Skript>

<Vorlage>
  <div Klasse="wrap">
    <div Klasse="Artikel" v-for="(Artikel, Index) in apiArr" :Schlüssel="Index">
      <div Klasse="imgWrap">
        <img :src="item.imgTitle" alt="" />
      </div>
      <div Klasse="infoWrap">
        <div><span class="bloder">Rang:</span> {{ item.title }}</div>
        <div><span class="bloder">Punktzahl:</span> {{ item.score }}</div>
      </div>
    </div>
  </div>
</Vorlage>

<Skript>
// importiere zuerst von "@/assets/img/first.png";
importiere Sekunde aus "@/assets/img/second.png";
importiere drittes aus '@/assets/img/third.png'
Standard exportieren {
  Daten() {
    zurückkehren {
      apiArr: [
        {
          Titel: "Champion",
          Punktzahl: "98,8",
          imgTitle: first, // Benutze das importierte Bild},
        {
          Titel: „Zweiter“,
          Punktzahl: "97,9",
          imgTitle: zweites, // Benutze das importierte Bild},
        {
          Titel: „Dritter Zweitplatzierter“,
          Punktzahl: "96,2",
          imgTitle: third, // Benutze das importierte Bild},
      ],
    };
  },
};
</Skript>