search

webdiscus / pug-loader

Pug loader for Webpack renders pug to HTML or template function
https://webdiscus.github.io/pug-loader/pug-filters
ISC License
72 stars 5 forks source link

img srcset attribute #7

Closed baronkoko closed 2 years ago

baronkoko commented 2 years ago

Hi, is it possible to use such a feature?

img(
  src=require('@/assets/images/img.png'),
  srcset=`${require('@/assets/images/img@2x.png')} 2x, ${require('@/assets/images/img@3x.png')} 3x`,
  alt='My image'
)

This code currently gives the following error:

Error: Error parsing body of the with expression

Stack:

baronkoko commented 2 years ago

Method html helped. Everything worked 

img(
  src='~@/assets/images/img.png',
  srcset='~@/assets/images/img@2x.png 2x, ~@/assets/images/img@3x.png 3x',
  alt='My image'
)

Thank you for your work!

webdiscus commented 2 years ago

Hello @baronkoko,

thank you for interesting usage case. I have implemented the resolving for srcset in the new version 1.6.2. Now all methods can correct resolve it. For example:

 img(srcset=`${require('./image1.jpeg')} 320w, ${require('./image2.jpeg')} 640w` src=require('./image.jpeg'))

output

 <img srcset="/assets/image1.f78b30f4.jpeg 320w, /assets/image2.f78b30f4.jpeg 640w" src="/assets/image.f78b30f4.jpeg">

You can see the test case.

baronkoko commented 2 years ago

@webdiscus Wow, thanks for the quick response and solution!