DEV Community

Cover image for Setting dynamic background images in Nuxt
Felix Nana Yaw Yeboah-Jefferson
Felix Nana Yaw Yeboah-Jefferson

Posted on

Setting dynamic background images in Nuxt

I had a few problems days ago with how to set dynamic background images in Nuxt. I tried different ways of pulling this one out and yet I wasn't able to till yesterday. By the way, this is my first time using Nuxt for a project and I suggested this in the new firm I recently joined. Since I suggested it, I might as well be the first person to use it on our website. So yes, I started using the framework and I had a few challenges but throughout the journey, I found solutions to those challenges and yes I say, its a great learning curve and it also gave me the opportunity to explore more with the framework. Back to the challenge I faced, this challenge was something else. I did a lot of googling and also finding solutions online but none worked till I played around and found a solution. I shared my solution to few people and communities who might be in need also and I found this community to be a great one, decided to create an account and also share this here. I don't know but it might also help someone, if not today, might be tomorrow or another day.

Alt text of image

So I began by creating a computed property and created backgroundURL within the computed property and return the looped dynamic background images. The main problem why dynamic images does work when used on an element or a div is because, you should require the images and since there's no way of requiring, that's why i created a computed proptery and required the images and after called the property on background image.

Alt text of image

I bind the style since its a dynamic background-image and within the URL link, i placed in the computed property i created for the background image and added some styles to make the image look good.

Alt text of image

This is the end results of the dynamic background images with style in NUXT

Alt text of image

I used the same procedure and also created something nice with it for the services section.

Alt text of image

I hope this helps someone and I am available to anyone who has questions or doesn't understand anything, feel free to hit me up on here or twitter @jaeyholic .

Top comments (3)

Collapse
 
edulecca profile image
edulecca

thank you! really love the approach

Collapse
 
hoektoe profile image
Martin Smit

Thank you , all I had missing was to pull the ENV variable also into a computed and use that computed for the pathing

Collapse
 
clemcornet profile image
Clem' Crnt

Thank you for your post, it helped me a lot ! 👍