如何使用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>

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