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

Question

首先，我有一个带有新闻的数组（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>

但我无法显示新闻的背景（预览），它输出错误。

how it should look

Answer 1

你没有循环正确的值

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

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

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