當使用 axios 從 API 呼叫接收動態值時，由於路徑不正確，Vue js 圖像 v-bind src 無法運作

Question

我在顯示圖像時遇到問題，我想從 SQL 資料庫取得其路徑，然後將它們顯示在我的網站專案上。這就是我試圖使其發揮作用的方式：

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

在 testItem.pictureLink 我有這個字串 "@/assets/b1q2v1.png"

這不起作用，因為圖像的路徑發生了變化。在開發者選項的網路標籤中，請求 URL 變更為

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

然後當我在沒有 v-bind 的情況下手動輸入字串時：

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

顯示的圖片的請求 URL 為

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

我嘗試過類似的解決方案

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

但是不起作用，錯誤是：

錯誤：找不到模組「@/assets/b1q2v1.png」

如何正確地將src屬性綁定到我的動態圖片路徑？

Answer 1

您可以將 pictureLink 變更為名稱：

testItem.pictureLink = 'b1q2v1'

然後建立獲取影像的方法：

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

並從模板呼叫該方法：