如何在Vue中的img标签内使用v-for变量（在div中声明）（img标签在div标签中？）>

Question

我正在使用Vue.js来构建网页，所以我正在使用v-for迭代，我想访问内部的迭代变量标签。检查下面的代码，请帮助我。.

<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" },
   }
 ]}
 }
}

我遇到错误check this image

**check this image (image doesn't show up in webpage)

我正在使用Vue.js来构建网页，所以我正在使用v-for进行迭代，我想访问标记内的迭代变量。检查以下代码，请帮助我。.

Answer 1

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

Answer 2

绑定属性时，您缺少块引用。请记住，:的工作方式类似于v-bind:。