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

Posted 2023-02-22

【中文标题】如何使用 v-for 显示背景图像？

【英文标题】：How to display background images using v-for?

【发布时间】：2020-07-28 18:03:09

【问题描述】：

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

【问题讨论】：

查看这篇文章：***.com/questions/35242272/…

我想，不是这样的

【参考方案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>

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