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

Question

我在数组（命名项）上使用了 v-for，其中包含名称和各个图像的 url，但是当我将个人图像 URL 提供给 img 标签时，它什么也没显示.

This is code to display Images

    <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

目前，您没有使用 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" />

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

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

Answer 2

您在绑定属性时缺少双引号。请记住，: 的工作方式与 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>

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

How to get the Images to display using v-for?

for-loop

for-in-loop

vue.js