问如何使用v-for显示背景图像？
EN

Stack Overflow用户

提问于 2020-04-15 16:55:29

回答 1查看 187关注 0票数 1

首先，我有一个带有新闻的数组(id、名称和预览路径)：

data: () => ({
    news: [
        {
            'id': '1',
            'name': 'First news',
            'preview': '../assets/img/app/news/image_1.png'
        },
        {
            'id': '2',
            'name': 'Second news',
            'preview': '../assets/img/app/news/image_2.png'
        },
    ]
})

让我说，我不知道我有多少新闻。所以，我必须使用v-for来显示所有的新闻。

<div v-for="the_news in news.id" :key="the_news" 
     :style="'background: url(' + require(news.preview[the_news]) + ')'">

     <p>{{ news.name[the_news] }}</p>
</div>

但是我不能显示新闻的背景(预览)，它输出错误。

它应该是什么样子

vue.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-04-15 17:32:22

您没有遍历正确的值

<div v-for="the_news in news" :key="the_news.id" 
     :style="'background: url(' + require(the_news.preview) + ')'">

     <p>{{ the_news.name }}</p>
</div>

您需要遍历数组，而不是遍历数组中每个元素中的属性。

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61234310

复制

相似问题

问如何使用v-for显示背景图像？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用v-for显示背景图像？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用v-for显示背景图像？
EN