Vue js image v-bind src funktioniert aufgrund eines falschen Pfads beim Empfang dynamischer Werte von einem API-Aufruf mit Axios nicht

Question

Ich habe ein Problem mit der Anzeige von Bildern. Ich möchte ihre Pfade aus der SQL-Datenbank abrufen und sie dann in meinem Website-Projekt anzeigen. So habe ich versucht, es zum Laufen zu bringen:

<div class="imagesInQuestion">
  <img class="inlineImages" :src="testItem.pictureLink" />
</div>

bei testItem.pictureLink 我有这个字符串 "@/assets/b1q2v1.png"

Das funktioniert nicht, da sich der Pfad des Bildes ändert. Ändern Sie auf der Registerkarte „Netzwerk“ der Entwickleroptionen die Anforderungs-URL in

localhost:8080/courses/tests/@/assets/b1q2v1.png

Wenn ich dann die Zeichenfolge manuell ohne V-Bind eingebe:

<div class="imagesInQuestion">
  <img class="inlineImages" src="@/assets/b1q2v1.png" />
</div>

Die Anforderungs-URL des angezeigten Bildes lautet

localhost:8080/img/b1q2v1.2aa65ed1.png

Ich habe ähnliche Lösungen ausprobiert

<div class="imagesInQuestion">
  <img
    class="inlineImages"
    :src="required(testItem.pictureLink)"
  />
</div>

Aber es funktioniert nicht, der Fehler ist:

Fehler: Modul „@/assets/b1q2v1.png“ nicht gefunden

Wie binde ich das src-Attribut korrekt an meinen dynamischen Bildpfad?

Answer 1

您可以将 pictureLink 更改为名称：

testItem.pictureLink = 'b1q2v1'

然后创建获取图像的方法：

methods: {
  getImage(img) {
    return require(`@/assets/${img}.png`);
  }
}

并从模板调用该方法：