如何使用 v-for 显示图像？ [关闭]答案

【问题标题】：How to get the Images to display using v-for? [closed]如何使用 v-for 显示图像？ [关闭]
【发布时间】：2020-04-18 11:26:56
【问题描述】：

我在一个数组（命名项目）上使用了 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]

【问题讨论】：

标签： vue.js for-loop for-in-loop

【解决方案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>

【讨论】：

谢谢。但是还是不行
您需要将图片放入文件夹public/assets，然后您可以将您的URL更改为assets/dnc.jpg、assets/kkhh.jpg等。更多关于Vue.JS中静态资源的信息可以找到here.
谢谢它的工作我改变了图像的位置
乐于助人。记得将问题标记为已回答。

【解决方案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" />

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

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

【讨论】：

非常感谢。但它不起作用....
请编辑您的帖子并添加您当前的代码以查看缺少的内容。