如何使用 Vue JS 绑定图片

Question

我使用的是 Vue 3，当我使用 :src 时我的网站上什么也没有出现，我使用的是一个带有 v-for 的数组。那是我的代码：

  <BreezeDropdownLink2 v-for="(item, i) in itemsCart" :key="i" class=" hover:bg-gray-100 inline-flex w-full py-3 dark:hover:bg-gray-800">
    <div class="justify-between inline-flex w-full">
      <div class="rounded-md bg-gray-100 block h-12 dark:bg-vd2">
        <img :src="item.image" class="w-16 h-12">
      </div>
      <div>
        <p class="font-semibold text-gray-500 dark:text-gray-300" v-html="item.title"></p>
        <span class="text-xs mb-10 text-gray-400" v-html="item.subtitle"></span>
      </div>
      <div class="inline-flex">
      <NumberInput/>
      <span class="font-semibold text-gray-500 ml-3 mt-5 dark:text-gray-300" v-html="'$'+item.price"></span>
      <a @click="removeItem(item.id)" class="dark:text-gray-300"><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" class="cart-item-remove cursor-pointer feather feather-x"><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>

itemsCart是：

itemsCart:[{id: 1, title: 'Apple Watch <br> Series 5', price: 339.99, subtitle:'By Apple', image:'../Assets/Img/product1.png'}]

Answer 1

在 require 调用中包装图像的路径。下面的代码对我来说很好用。

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

如何使用 Vue JS 绑定图片

How to bind a image with Vue JS

vue.js

vue-component

vuejs3