Vue.js图像v-for bind [英] Vue.js image v-for bind

问题描述

是否可以使用v-for来获取加载的图像数组？
尝试使用以下代码：
我对Vue很新，我还有很多需要学习的东西。所以任何帮助将不胜感激。谢谢

Any way to use v-for to get an array of images loaded? Have tried with the following code: Im pretty new to Vue, I still have a lot to learn. So any help will be greatly appreciated. Thanks

<template>
      <section class="hero_home">
         <app-header></app-header>
          <article>
            <h1>About</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, aperiam doloremque possimus nemo incidunt, consequatur quidem facere in ipsam ratione quod? Provident laborum magnam accusantium sequi optio error sunt, sit.</p>
        </article>

            <img v-for="image in images" :src="images.url" :alt="images.alt" />

        <app-footer></app-footer>
      </section>
</template>


<script>
    import Header from './header.vue'
    import Footer from './footer.vue'

    export default {
        components: {
            'app-header': Header,
            'app-footer': Footer
        },
      data () {
        return {
            images: [
                { url: '../static/1.jpg', alt: 'I love you nature' },
                { url: '../static/2.jpg', alt: 'Now with dog - Rosé' },
                { url: '../static/3.jpg', alt: 'Jeg er i Danmark' },
                { url: '../static/4.jpg', alt: 'Badabimbadabum' },
                { url: '../static/5.jpg', alt: 'Goodmorning el mundo' },
                { url: '../static/6.jpg', alt: 'My white and rosé with paella' },
                { url: '../static/7.jpg', alt: 'Hopla' },
                { url: '../static/8.jpg', alt: 'Watering by night' },
                { url: '../static/9.jpg', alt: 'Life aint so bad at all...' },
                { url: '../static/10.jpg', alt: 'My whitewine' },
                { url: '../static/11jpg', alt: 'First time for everything...winefair!' },
                { url: '../static/12.jpg', alt: 'Lost around 20% of this years yield!' }
            ]
        }
      }
    }
</script>

推荐答案

使用 image 对象元素不是 images 对象数组在 src 和 alt

use image object element not images object array here in src and alt

 <img v-for="image in images" :src="image.url" :alt="image.alt" />

这篇关于Vue.js图像v-for bind的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！