javascript - 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 中的 require 绑定，但不幸的是无法正常工作

Answer 1

此代码尚未经过测试，但我相信它应该可以解决问题。最重要的是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>

Answer 2

public使用路径或路径怎么样，我的意思是删除require

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

而且我认为你可以断言 / 用于结束标签