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.
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.
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.
This is the end results of the dynamic background images with style in NUXT
I used the same procedure and also created something nice with it for the services section.
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)
thank you! really love the approach
Thank you , all I had missing was to pull the ENV variable also into a computed and use that computed for the pathing
Thank you for your post, it helped me a lot ! 👍