img src not working in Vue js and must have a correct path?

user_11428852 0
Viewed 540

image src not working. can anybody help me?

<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 is bind with require from node.js but unfortunately is not working

vue-router vue.js node.js javascript
2 Answers

How about use public path or path, I mean remove require

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

And way i see it you can assert / for end tag

user_110402190

This code has not been tested but I'm sure it should do the trick. The most important is the getImg method which allows you to access require() and get the image path.

<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>
user_117820270
Related