How to partially change attribute values ​​in a loop in Pug?

Question

Pug

Good evening!
I'm learning the syntax and features of Pug.
I came across the fact that you need to make 3 identical blocks, but with slightly different attribute values. And the first thought is naturally cycles. I began to write but something went wrong with me with him.
You need to do the following markup:

<div class="item">
  <img src="/img/1.jpg" srcset="/img/[email protected] 2x">
</div>
<div class="item">
  <img src="/img/2.jpg" srcset="/img/[email protected] 2x">
</div>
<div class="item">
  <img src="/img/3.jpg" srcset="/img/[email protected] 2x">
</div>

I tried like this:

each val in [1,2,3]
  div.item
    img(src='/img/#{val}.jpg' srcset='/img/#{val}@#{val}x.jpg 2x')

and instead of #{val},
did this: '/img/' + #{val} + '.jpg',
and also like this: '/img/' + val + '.jpg'
But in the end it didn’t work.
Is it possible in a Pug loop to display different attribute values ​​depending on the iteration, and if so, how?

Answer 1

each val in [1,2,3]
  div.item
    img(src="/img/#{val}.jpg" srcset="/img/#{val}@2x.jpg 2x")

You can control the output with if, but your problem is somewhere else here @#{val}x