CODEWITHSUNDEEP
imagewebpacksrcset
LBRTYCAT
LBRTYCAT

Reputation: 53

How to load the image form the srcset attribute of the <picture> in Webpack?

I started using the tag in my Webpack app and noticed that the current setup is not working with the images referenced in the srcset:

<picture>
<source srcset="img/goal-2.jpg" media="(min-width: 675px)">
<img src="../img/goal-2-s.jpg">
</picture>

The goal-2-s.jpg is correctly resolved and copied over to my build folder, while the goal-2.jpg is ignored.

Currently my webpack.config.js config looks like this:

{
    test: /\.(jpe?g|png|gif|svg)$/i,
    loader: 'file?name=img/[name].[ext]'
},...

I don't want to auto generate files of different sizes -- I the files I'm loading are differently cropped and I do it manually and save it in my app folder. All I want is Webpack to handle my source's srcset image in the same way as it does the img's src image.

Thanks!

Upvotes: 5

Views: 2874

Answers (2)

Michael Jungo
Michael Jungo

Reputation: 33010

The html-loader only processes the src attribute of <img> tags by default (as shown in its README). But you can use the attrs option to make it process your desired attributes by specifying an array of tag:attribute. The .html rule would look like this:

{
  test: /\.html/,
  loader: 'html-loader?attrs[]=img:src&attrs[]=source:srcset'
}

Or with the better webpack 2 options syntax:

{
  test: /\.html/,
  loader: 'html-loader',
  options: {
    attrs: ['img:src', 'source:srcset']
  }
}

Upvotes: 5

Marco Salerno
Marco Salerno

Reputation: 5201

<source srcset="../img/goal-2.jpg" media="(min-width: 675px)">

The path was wrong

Upvotes: 0

Related Questions