Über das Problem der dynamischen Spleißen der SRC-Bildadresse von img in Vue

Werfen wir einen Blick auf das dynamische Spleißen von img in Vue: src-Bildadresse, der spezifische Inhalt ist wie folgt:

Anwendungsszenario: Ordnen Sie lokale Bildressourcen entsprechend dem vom Backend zurückgegebenen Bild-Tag zu. Beispiel: Gemäß dem vom Backend zurückgegebenen k1-Tag generiert das Frontend den Bildressourcenpfad asset/images/inventory/k1.png

<Vorlage>
    <div Klasse="fl">
          <img :src="getImgUrl(gatherInfo.img1)" alt="">
          <img :src="getImgUrl(gatherInfo.img2)" alt="">
          <img :src="getImgUrl(gatherInfo.img3)" alt="">
     </div>
</Vorlage>

Daten(){
    zurückkehren {
      Informationen sammeln:
        Titel: „Informationen zur Bestandsübersicht“,
        img1: 'k1',
        img2: 'k2',
        img3: 'k3',
      },
    }
}

In Methoden

//Bildadresse abrufen getImgUrl (img) {
      Rückgabe erforderlich("@/assets/images/inventory/" + img+ ".png");
    },

Dies ist das Ende dieses Artikels über das dynamische Spleißen von img in Vue: src-Bildadresse. Weitere relevante Inhalte zum dynamischen Spleißen von Vue-img finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!