img src 不能在 Vue js 中工作並且必須有正確的路徑？

Question

圖像 src 不工作。 有誰能夠幫我？

<div v-for="(item, index) in businessItems" :key="index" class="business-item">
    <div class="item-wrap">
        <div class="wishlist">
            <i class="icon-wishlist-line"></i>
            <i class="icon-wishlist d-none"></i>
        </div>
        <div class="image">
            <img :src="require(`@/assets/images/business/${item.img_url}`)">
        </div>
        <h2 class="title">{{item.title}}</h2>

        <StarRating :rate="item.rate" />

    </div>
</div>

img src 與 node.js 的要求綁定，但不幸的是無法正常工作

Answer 1

使用public路徑或路徑怎么樣，我的意思是刪除require

<img :src=`/assets/images/business/${item.img_url}`/>

而且我認為你可以斷言 / 用於結束標簽

Answer 2

此代碼尚未經過測試，但我相信它應該可以解決問題。 最重要的是getImg方法，它允許您訪問require()並獲取圖像路徑。

<template>
  <div>
    <div v-for="(item, index) in businessItems" :key="index" class="business-item">
      <div class="item-wrap">
        <div class="wishlist">
          <i class="icon-wishlist-line"></i>
          <i class="icon-wishlist d-none"></i>
        </div>
        <div class="image">
          <img :src="getImg(item.img_url)">
        </div>
        <h2 class="title">{{item.title}}</h2>   
        <StarRating :rate="item.rate" />
      </div>
    </div>
  </div>
</template>

<script>
import businessItems from '@/services/business';

export default {
  data() {
    return {
      businessItems,
    }
  },
  methods: {
    getImg(url) {
      return require(`@/assets/images/business/${url}`);
    }
  }
}
</script>

<style>

</style>