gpt4 book ai didi

image - 如何从Webpack中的srcset属性加载图片?

转载 作者:行者123 更新时间:2023-12-04 11:24:25 25 4
gpt4 key购买 nike

我开始在我的 Webpack 应用程序中使用该标签,并注意到当前设置不适用于 srcset 中引用的图像:

<picture>
<source srcset="img/goal-2.jpg" media="(min-width: 675px)">
<img src="../img/goal-2-s.jpg">
</picture>

目标 2-s.jpg 被正确解析并复制到我的构建文件夹,而目标 2.jpg 被忽略。

目前我的 webpack.config.js 配置如下所示:
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file?name=img/[name].[ext]'
},...

我不想自动生成不同大小的文件——我加载的文件的裁剪方式不同,我手动完成并将其保存在我的应用程序文件夹中。我想要的只是 Webpack 以与处理 img 的 src 图像相同的方式处理我的源的 srcset 图像。

谢谢!

最佳答案

html-loader只处理 src <img> 的属性默认情况下标记(如其 README 所示)。但是您可以使用 attrs通过指定 tag:attribute 的数组使其处理所需属性的选项. .html规则如下所示:

{
test: /\.html/,
loader: 'html-loader?attrs[]=img:src&attrs[]=source:srcset'
}

或者使用更好的 webpack 2 options句法:
{
test: /\.html/,
loader: 'html-loader',
options: {
attrs: ['img:src', 'source:srcset']
}
}

关于image - 如何从Webpack中<picture>的srcset属性加载图片?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42769770/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com