Imej Vue js v-bind src tidak berfungsi kerana laluan yang salah apabila menerima nilai dinamik daripada panggilan API menggunakan axios

Question

Saya mempunyai masalah dengan memaparkan imej, saya ingin mendapatkan laluan mereka daripada pangkalan data SQL dan kemudian memaparkannya pada projek tapak web saya. Beginilah cara saya cuba membuatnya berfungsi:

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

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

Ini tidak berfungsi kerana laluan imej berubah. Dalam tab Rangkaian Pilihan Pembangun, tukar URL Permintaan kepada

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

Kemudian apabila saya memasukkan rentetan secara manual tanpa v-bind:

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

URL permintaan bagi imej yang dipaparkan ialah

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

Saya mencuba penyelesaian yang serupa

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

Tetapi ia tidak berfungsi, ralatnya ialah:

Ralat: Modul "@/assets/b1q2v1.png" tidak ditemui

Bagaimana untuk mengikat atribut src dengan betul ke laluan imej dinamik saya?

Answer 1

Anda boleh menukar pictureLink kepada nama:

testItem.pictureLink = 'b1q2v1'

Kemudian buat kaedah untuk mendapatkan imej:

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

Dan panggil kaedah dari templat: