【问题标题】: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
    猜你喜欢
    • 2021-02-12
    • 2020-04-14
    • 1970-01-01
    • 2021-07-18
    • 2015-03-24
    • 1970-01-01
    • 2013-02-16
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多