有没有办法使用v-for加载一组图像?

已try 使用以下代码:

我是Vue的新手,我还有很多东西要学.因此,任何帮助都将不胜感激.谢谢

<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>

推荐答案

srcalt中使用image对象元素,而不是images对象array.

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

Vue.js相关问答推荐

如果似乎没有明确使用输入事件,那么发出输入事件有什么作用?

vuejs3 youtube-plugin YT 未定义控制台错误

我如何使用 vuejs 在我的 url 中编码一个令牌

如何通过 setup() 发出多个参数?

使用 Vue.js 清除数组内容和react性问题

将初始值设置为可直接在 HTML 中使用的 vue.js 模型

如何在 vue 路由中导航到 Bootstrap-vue 选项卡中的特定选项卡?

nuxt.js - 预加载 .woff 字体加载为@font-face

如何在 vue.js 2 的其他组件中调用方法?

Webpack 你可能需要一个合适的加载器来处理这个文件类型

使用 vee-validate 在 vue js 中进行验证有错误

如何在 vue 3 脚本设置中使用

将自定义部分添加到 v-autocomplete 下拉列表

VueJS 禁用特定属性的react性

如何将项目推送到 Vuejs 中数据对象的数组中? Vue 似乎没有关注 .push() 方法

使用 Spring Boot(VueJS 和 Axios 前端)禁止发布 403 帖子

在 Chrome DevTools 中实时更改时 destruct 了 Vue.js 应用程序(Webpack 模板)的页面样式

如何使用 Vuetify 验证复选框组

我们可以像在 Angular 中一样创建 Vue.js 组件时将 HTML、JS 和 CSS 文件分开吗?

理解 Vue 中的this关键字