CODEWITHSUNDEEP
vue.js
Tyoma Inagamov
Tyoma Inagamov

Reputation: 125

How to display background images using v-for?

To start with, I have the array with news (id, name and path to preview):

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'
        },
    ]
})

And lets say, I don't know how many of news I have in the array. So, I have to use v-for to display all the news.

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

But I cant display the background (preview) of the news, it outputs errors.

how it should look

Upvotes: 1

Views: 329

Answers (1)

Radu Diță
Radu Diță

Reputation: 14181

You're not looping over the right values

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

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

You need to loop over your array, not over a property from inside each element in the array.

Upvotes: 3

Related Questions