Javascript 网页包html加载程序，包括用于延迟加载的数据src图像

我正在使用带有html加载器的webpack在我的dist文件夹中创建一个资产文件夹。 但我试图通过使用数据src链接更改src属性来实现对图像的延迟加载

我在中发现，您可以指定others属性，这就是我所做的

rules: [
    {
        test: /\.html$/,
        use: {
            loader: "html-loader",
            options: {
                attributes: [':srcset',':data-srcset', 'img:data-src', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src', 'input:src', 'object:data', 'script:src']
            }
        }
    },
    {
        test: /\.(svg|png|jpg|jpeg|gif)$/, // Ajouter les nouveaux types quand il y en a
        use: {
            loader: "file-loader",
            options: {
                name: "[name]-[hash].[ext]",
                outputPath: "assets",
                esModule: false
            }
        }
    }
]

<img data-src="./assets/image.jpg" alt="">

规则：[
{
测试：/\.html$/,，
使用：{
加载器：“html加载器”，
选项：{
属性：['：srcset'，'：data srcset'，img:data src'，img:src'，audio:src'，video:src'，track:src'，embed:src'，source:src'，input:src'，object:data'，script:src']
}
}
},
{
测试：/\（svg | png | jpg | jpeg | gif）$/，//a外部的新类型数量
使用：{
加载器：“文件加载器”，
选项：{
名称：“[name]-[hash].[ext]”，
outputPath:“资产”，
esModule:错误
}
}
}
]

运行webpack时，不会在dist文件夹中创建图像

我找到了其他的问题，但没有找到一个好的答案。

经过一天的研究。 事实证明，您需要使用属性而不是属性。医生似乎错了。。。 所以你应该有这样的东西

test: /\.html$/,
use: {
    loader: "html-loader",
    options: {
        attrs: [':srcset',':data-srcset', 'img:data-src', 'img:src', 'audio:src', 'video:src', 'track:src', 'embed:src', 'source:src', 'input:src', 'object:data', 'script:src']
    }
}