img src 不能在 Vue js 中工作并且必须有正确的路径？答案

【问题标题】：img src not working in Vue js and must have a correct path?img src 不能在 Vue js 中工作并且必须有正确的路径？
【发布时间】：2020-11-28 18:17:22
【问题描述】：

图片来源不工作。有人可以帮帮我吗？

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

【问题讨论】：

请显示文件结构的外观以了解您要引用的内容？
它应该可以工作。检查路径是否正确。否则请给我们更多信息。

标签： javascript node.js vue.js vue-router

【解决方案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>

【讨论】：

【解决方案2】：

如何使用public路径或路径，我的意思是删除require

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

我认为你可以断言 / 作为结束标签

【讨论】：

不幸的是无法正常工作。需要将 @ 转换为主路径
出现错误 ------ 解析错误：unexpected-character-in-unquoted-attribute-value