Webpack:HTML加载程序无法解析srcset图像 [英] Webpack: html-loader not resolving srcset images

问题描述

我正在使用webpack2并使用html-loader和以下配置，如下所示:

  {测试:/\.html $/，loader:"html-loader"，选项: {属性:['img:src'，'img:srcset']，最小化:是的，caseSensitive:正确，removeAttributeQuotes:false，minifyJS:false，minifyCSS:false}，排除:['./src/main/webapp/index.html']} 

我希望html-loeader解析下面的srcset图片:

 < imgsize =(最大宽度: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 3840wsrc ="../../../content/images/boy-with-plane_hnbkjs_c_scale,w_3840.jpg"alt ="> 

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

./src/main/webapp/app/layouts/号召性用语/号召性用语中的

  ERRORaction.component.html找不到模块:错误:无法解析'../../../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 应该可以解决问题.任何帮助将不胜感激.

解决方案

我最终用 html-srcsets-loader 替换了 html-loader 来解决了我的问题./p>

npm我html-srcsets-loader

  {测试:/\.html $/，loader:"html-srcsets-loader"，选项: {属性:['img:src'，':srcset']，最小化:是的，caseSensitive:正确，removeAttributeQuotes:false，minifyJS:false，minifyCSS:false}，排除:['./src/main/webapp/index.html']} 

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

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.

解决方案

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

这篇关于Webpack:HTML加载程序无法解析srcset图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！