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

Posted 2023-02-22

【中文标题】img src 不能在 Vue js 中工作并且必须有正确的路径？

【英文标题】：img src not working in Vue js and must have a correct path?

【发布时间】：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 绑定，但不幸的是无法正常工作

【问题讨论】：

请显示文件结构的外观以了解您要引用的内容？

它应该可以工作。检查路径是否正确。否则请给我们更多信息。

【参考方案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