How to bind a image with Vue JS-CodePudding

I'm using Vue 3 and when I use :src in nothing appear in my site, I'm using one array with v-for. That's my code:

          <BreezeDropdownLink2 v-for="(item, i) in itemsCart" :key="i" >
            <div >
              <div >
                <img :src="item.image" >
              </div>
              <div>
                <p  v-html="item.title"></p>
                <span  v-html="item.subtitle"></span>
              </div>
              <div >
              <NumberInput/>
              <span  v-html="'$' item.price"></span>
              <a @click="removeItem(item.id)" ><svg data-v-c52069be="" xmlns="http://www.w3.org/2000/svg" width="14px" height="14px" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><line data-v-c52069be="" x1="18" y1="6" x2="6" y2="18"></line><line data-v-c52069be="" x1="6" y1="6" x2="18" y2="18"></line></svg></a>
              </div>
            </div>
          </BreezeDropdownLink2>
----------------------------------------
<scipt> 
itemsCart:[
        {id: 1, title: 'Apple Watch <br> Series 5', price: 339.99, subtitle:'By Apple', image:'../Assets/Img/product1.png'},
</script>

CodePudding user response：

Wrap the images' path in a require call. The below code works fine for me.

<template>
  <div>
    <div v-for="item in itemsCart" :key="item.id">
      <div>
        <img :src="item.image" style="width:50px;height:50px" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'App',
  data () {
    return {
      itemsCart: [{
        id: 0,
        image: require('./assets/logo1.png')
      },
      {
        id: 1,
        image: require('./assets/logo2.png')
      }
      ]
    }
  }
}
</script>