Webpack html -loader, включает data-sr c образ для отложенной загрузки

Question

Я использую webpack с html -loader для создания папки ресурсов внутри моей папки dist. Но я пытаюсь реализовать отложенную загрузку изображений, изменяя атрибут sr c с помощью ссылки data-sr c.

Я обнаружил в do c, что вы Можно указать атрибут «Другие», что я и сделал.

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

Когда я запускаю веб-пакет, мое изображение не создается в папке dist.

Я нашел другие вопросы здесь и здесь об этом, но не смог найти хороший ответ.

Answer 1

После 1 дня исследования. Оказывается, вам нужно использовать атрибуты вместо атрибутов. Кажется, что do c неправильный ... Так что у вас должно быть что-то подобное.

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