程序员经验分享-hwhale

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

2023-12-24

我正在使用 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-loader 解析下面的 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,

即使attrs: ['img:src', 'img:srcset']设置为 html-loader，图像无法解析。img:srcset应该可以解决问题。任何帮助，将不胜感激。


我最终通过替换解决了我的问题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']
        }

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

angular

WEBPACK

Webpack：html-loader 无法解析 srcset 图像 的相关文章

随机推荐

  • Vue3 路由器 + 转换警告

    我有一个带有转换的包装组件 Wrapper vue

  • app.yaml 上的错误处理程序

    如何处理应用程序引擎上的不同错误代码 在我的 app yaml 文件中 我有 error handlers file error notfound html error code over quota file error over quo

  • 移动赋值运算符上的异常说明符如何影响移动构造函数的异常说明符？

    我一直在 C 14 模式下使用 GCC 5 2 和 clang 3 6 进行测试 它们给出相同的输出 对于以下代码 include

  • Web API 和 EF 导致 InvalidOperationException

    我的解决方案中有 3 个项目 DataModel EF DAL 它与 DataModel 和 MVC Web API 中的实体一起使用 只有 2 个非常简单的实体 Person Address 每个实体都有 3 个简单字段 Person 具

  • iphone CLLocationmanager 区域监控回调未触发

    我正在尝试使用监控区域来跟踪用户是否访问过地标 位置管理器与地图套件一起在视图控制器中初始化 在视图控制器的 viewDidLoad 中 if self locationManager nil NSLog creating location

  • C++ 中变量、方法等的良好命名约定是什么？ [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi

  • Websphere Liberty：JMS 会话不起作用

    我正在将 EJB 应用程序从 websphere 9 0 迁移到 Liberty 我正在使用应用程序服务器迁移实用程序来帮助我进行迁移 列出的问题之一是 移植的本地事务 JMS 会话在 Liberty 中不起作用 我查看了帮助中提到的详细信

  • 如何强制 jQuery“监听”未来的 AngularJS ng-repeat 元素并激活插件？

    对 jQuery 有相当的经验 对 AngularJS 很陌生 我有一个页面 其中包含颜色列表 可变数字 并附有 jQuery 颜色选择器 由类 colorpicker 标记 在 PHP 生成的静态页面版本上 效果很好 但是将其转换为 ng

  • 使用 vanilla JS 突出显示活动选项卡

    我正在创建一个选项卡式导航栏 其中当选项卡处于活动状态时 它应该将其颜色更改为我设置的颜色 使用选项卡浏览页面效果很好 但活动选项卡上的颜色突出显示似乎不起作用 到目前为止 这是我的代码 HTML section class tab sec

  • Jenkins 构建时的 java.nio.file.AccessDeniedException

    我正在 MacOSX 服务器上设置 Jenkins 系统 以便在 svn 签入后自动构建 但是当构建开始时 我在控制台输出中收到这些 java 错误 有谁有詹金斯和这些错误的经验吗 Gestartet durch Benutzer anon

  • 在 Java 中创建一个新线程的成本有多高？我们什么时候应该考虑使用线程池？

    我想知道应该使用线程池的界限在哪里 在不使用线程池的情况下 每秒可以创建多少个新线程 仍然可以避免明显的性能损失 是否有任何可观察的开源线程池实现 考虑到成本 唯一有效的答复是亲自测试它 不是那么优雅的方式告诉你我从未做过这样的测试 也永远

  • 保存和恢复事件处理程序

    我的类包含数据集 TDataSet 我的班级的用户可以为此数据集分配事件处理程序 ds FieldByName ID OnChange ID OnChange 然后我必须重新打开数据集 ds Close ds Open 之后所有事件处理程序

  • C# 中的枚举有成员数量限制吗？

    我想知道枚举结构类型对其成员是否有限制 我有一个非常大的 变量 列表 我需要将其存储在枚举中或作为类中的常量 但我最终决定将它们存储在类中 但是 我对成员的限制有点好奇枚举 如果有 那么 枚举在 Net 上有限制吗 是的 会员人数具有独特的

  • Typescript - 为类成员设置默认值

    我有一个简单的模型 export class Profile extends ServerData name string email string age number 当我调用服务器 Angular 4 http 时 我经常得到以下响应

  • 在 Ruby 中按数组中对象的值排序

    我的数组中有一堆对象 想按每个对象具有的值进行排序 每个对象中的相关属性都是一个数值 例如 1 bunch of other stuff 5 12 3 会成为 1 bunch of other stuff 3 5 12 我想按每个对象中存储

  • 如何将大小相等的正方形网格减少到最小的矩形集？

    如果我有一个由相同大小的正方形组成的任意大小的网格 它们之间没有间距 我需要知道一种有效的方法将它们减少为minimum矩形的数量 例如 如果每个星号代表一个正方形 那么这可以减少为一个大矩形 虽然这可以减少为两个矩形 gt 1 2 一个明

  • 如何检查 Android 应用是否是设备所有者？

    我正在使用机器人框架执行一个测试用例 我必须安装一个应用程序并将其设置为设备所有者 然后检查同一应用程序是否已成为设备所有者 我已经搜索了 Stack Overflow 和其他搜索引擎结果 但在那里 他们提到了如何使应用程序成为设备所有者

  • 更改 LibGDX 中的坐标系 (Java)

    LibGDX 有一个坐标系 其中 0 0 位于左下角 就像这张图片 https i stack imgur com jVrJ0 png https i stack imgur com jVrJ0 png 这让我头撞墙 主要是因为我正在移植一

  • 带有片段参数的 Grails render()

    有没有办法将 render 与片段参数一起使用 以便在页面加载时自动滚动到页面的特定部分 类似于我们如何调用 redirect controller book action show fragment profile 你不能将它传递给ren

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

    我正在使用 webpack2 并使用 html loader 如下配置所示 test html loader html loader options attrs img src img srcset minimize true caseSe

热门标签