So I'm new with PUG and programming. I want to get img source and print it depending on the variable name. What I want to do is:
- var values = ['car', 'space', 'plants', 'rock', 'chair', 'phone', 'television'];
Then I'll do a for to iterate over this array and print random unplash depending on the word, something like:
each val in values.length ? values : ['There are no values']
img(src="https://source.unsplash.com/featured/1200x900?"+val alt=val loading="lazy")
I have tried different ways but can't seem to know how to call and print pictures using PUG. I tried to call it using:
img(src="https://source.unsplash.com/featured/1200x900?values[0]", alt="random")
But only works if I just say:
img(src="https://source.unsplash.com/featured/1200x900?car", alt="random")
Your Pug code:
- var values = ['car', 'space', 'plants', 'rock', 'chair', 'phone', 'television'];
each val in values.length ? values : ['There are no values']
img(src="https://source.unsplash.com/featured/1200x900?"+val alt=val loading="lazy")
generate HTML:
<img src="https://source.unsplash.com/featured/1200x900?car" alt="car" loading="lazy"/>
<img src="https://source.unsplash.com/featured/1200x900?space" alt="space" loading="lazy"/>
<img src="https://source.unsplash.com/featured/1200x900?plants" alt="plants" loading="lazy"/>
<img src="https://source.unsplash.com/featured/1200x900?rock" alt="rock" loading="lazy"/>
<img src="https://source.unsplash.com/featured/1200x900?chair" alt="chair" loading="lazy"/>
<img src="https://source.unsplash.com/featured/1200x900?phone" alt="phone" loading="lazy"/>
<img src="https://source.unsplash.com/featured/1200x900?television" alt="television" loading="lazy"/>
What do you expect? What is wrong?
You can self test your Pug code in any online converter, e.g. here: https://www.ubercompute.com/pug-to-html