Question

我在数组（命名项）上使用了v-for，该数组包含各个图像的名称和URL，但是当我将个人的图像URL赋予img标签时，它什么也没显示。

这是显示图片的代码

    <template>
    <main>
      <div v-bind:key="item" v-for="item in items">
        <img src=item.url alt="No Image" title="Order Now" />
        <section>{{item.name}}</section>
      </div>
    </main>
    </template>

    <script>
    export default {
    name: 'ShowCase',
    data() {
      return{
        items:[
          {
            name:"Doritos Nacho Cheese", 
            url:"../assets/dnc.jpg"
          },
          {
            name:"Kurkure Hyderbadi Hungama", 
            url:"../assets/kkhh.jpg"
          }, 
        ]
      }
    }

！[**查看此图片（图片未显示在网页中）] [2]

Answer 1

绑定属性时，您缺少双引号。请记住，:的工作原理与v-bind:一样。

<div v-for="(item, i) in items" :key="i">
   <img
      :src="item.url"
      :alt="item.name"
      title="Order Now!"
   />

   <section>{{ item.name }}</section>
</div>

Answer 2

当前，您没有使用VueJS绑定来告诉图像src，因此它们不是URL，而是接收字符串item.url

只需更换

<img src="item.url" alt="No Image" title="Order Now" />

使用

<img :src="item.url" alt="No Image" title="Order Now" />

它应该工作。 :之前的v-bind:（src的别名）告诉VueJS这是一个动态属性，必须在组件上下文中寻找其值。

NB：不要忘记item.url周围的双引号，它们是强制性的。

如何使用v-for显示图像？

2 个答案: