L'image Vue js v-bind src ne fonctionne pas en raison d'un chemin incorrect lors de la réception de valeurs dynamiques de l'appel API à l'aide d'axios

Question

J'ai un problème avec l'affichage des images, je souhaite récupérer leurs chemins à partir de la base de données SQL puis les afficher sur mon projet de site Web. Voici comment j'ai essayé de le faire fonctionner :

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

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

Cela ne fonctionne pas car le chemin de l'image change. Dans l'onglet Réseau des Options du développeur, remplacez l'URL de la demande par

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

Ensuite, lorsque je saisis la chaîne manuellement sans v-bind :

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

L'URL de requête de l'image affichée est

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

J'ai essayé des solutions similaires

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

Mais ça ne marche pas, l'erreur est :

Erreur : Module "@/assets/b1q2v1.png" introuvable

Comment lier correctement l'attribut src au chemin de mon image dynamique ?

Answer 1

Vous pouvez changer pictureLink en nom :

testItem.pictureLink = 'b1q2v1'

Créez ensuite une méthode pour obtenir l'image :

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

Et appelez la méthode depuis le modèle :