Webpack: html-loader not resolving srcset images

Question

I'm using webpack2 and using html-loader with the following as shown in the config below:

{
            test: /\.html$/,
            loader: 'html-loader',
            options: {
                attrs: ['img:src', 'img:srcset'],
                minimize: true,
                caseSensitive: true,
                removeAttributeQuotes:false,
                minifyJS:false,
                minifyCSS:false
            },
            exclude: ['./src/main/webapp/index.html']
        }

I want html-loeader to resolve the srcset images below:

    <img
        sizes="(max-width: 3840px) 100vw, 3840px"
        srcset="../../../content/images/boy-with-plane_hnbkjs_c_scale,w_190.jpg 190w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_693.jpg 693w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_1013.jpg 1013w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_1280.jpg 1280w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_1505.jpg 1505w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_1718.jpg 1718w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_1923.jpg 1923w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_2104.jpg 2104w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_2295.jpg 2295w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_2459.jpg 2459w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_2626.jpg 2626w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_2787.jpg 2787w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_2959.jpg 2959w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_3119.jpg 3119w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_3259.jpg 3259w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_3400.jpg 3400w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_3552.jpg 3552w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_3705.jpg 3705w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_3782.jpg 3782w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_3840.jpg 3840w"
                            src=" ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_3840.jpg"
        alt="">

When starting my dev build I get the following error:

ERROR in ./src/main/webapp/app/layouts/call-to-action/call-to- 
action.component.html
Module not found: Error: Can't resolve '../../../content/images/boy-with-plane_hnbkjs_c_scale,w_190.jpg 190w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_693.jpg 693w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_1013.jpg 1013w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_1280.jpg 1280w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_1505.jpg 1505w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_1718.jpg 1718w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_1923.jpg 1923w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_2104.jpg 2104w,
                ../../../content/images/boy-with-plane_hnbkjs_c_scale,w_2295.jpg 2295w,

Even with attrs: ['img:src', 'img:srcset'] set for html-loader, the images are not resolve. img:srcset is supposed to do the trick. Any help would be appreciated.

score 2 · Accepted Answer · answered Aug 12 '18 at 01:24

I ended up solving my issue by substituting html-loader with html-srcsets-loader.

npm i html-srcsets-loader

 {
            test: /\.html$/,
            loader: 'html-srcsets-loader',
            options: {
                attrs: ['img:src', ':srcset'],
                minimize: true,
                caseSensitive: true,
                removeAttributeQuotes:false,
                minifyJS:false,
                minifyCSS:false
            },
            exclude: ['./src/main/webapp/index.html']
        }

Even after changing to html-srcsets-loader I still got errors so I figured it was because of my image file names. So I renamed them to w_3552.jpg instead of boy-with-plane_hnbkjs_c_scale,w_3552.jpg

Similarly, I switched to https://github.com/patrickpissurno/html-loader-srcset. I think it's basically the same, but the guy has updated it a bit more. — Sia, Apr 15 '19 at 18:20

Webpack: html-loader not resolving srcset images

1 Answers1

Linked