Question

我正在使用webpack2并使用具有以下配置的html-loader，如下面的配置所示：

{
            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']
        }

我希望html-loeader解决以下srcset图片：

    <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="">

启动开发版本时，出现以下错误：

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,

即使为HTML加载程序设置了attrs: ['img:src', 'img:srcset']，图像也无法解析。 img:srcset应该可以解决问题。任何帮助将不胜感激。

Answer 1

最终我用html-loader代替了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']
        }

即使更改为html-srcsets-loader，我仍然遇到错误，因此我认为这是由于我的图像文件名。因此，我将它们重命名为w_3552.jpg而不是boy-with-plane_hnbkjs_c_scale,w_3552.jpg

Webpack：html-loader无法解析srcset图像

1 个答案: