包括来自其他文件的base64图像？答案

【问题标题】：Including base64 images from other files?包括来自其他文件的base64图像？
【发布时间】：2016-08-10 08:18:14
【问题描述】：

目前我通过data:在我的css和img标签中使用base64图像，你可以想象通过在文件中包含整个base64代码会变得非常混乱，因此我想知道是否有办法从外部文件导入它以及如何使用 webpack 处理这些？

【问题讨论】：

我不了解 webpack，但是将您的图像保存为 png 或 jpg 文件并将您的 css 设置为 url('yourFile.png') 应该可以；-) 更严重的是，您为什么使用 dataURI 版本？
或者你可以使用两个 .css 文件。一个文件包含所有样式。其他文件仅包含相关样式的 base64 图像。
@Kaiido 这样做会导致额外的 http 请求 + 我希望我的图像与样式表一起加载。
你知道缓存对吗？直接在 CSS 中包含它的好处是什么，你会在第一次加载时避免一个 http 请求，但你的图像会重 35%，因为b64 编码。此外，您可能听说过 load-event，并且由于您使用javascript 标记了您的问题，我想您不会害怕使用一些来检测您的图像何时加载以触发一个让您知道您的 css 的类'准备好显示内容了。
@Kaiido 我相信 base64 图像的缺点小于消除 FOUC 的优点（js 不是答案 - 它只是不同类型的 FOUC）

【解决方案1】：

webpack 的 url-loader 正是为此目的而制作的！

要配置它，只需将其添加到 webpack-config 的加载器中：

{
  test: /\.(svg|jpg|png|gif)$/,
  loader: 'url?limit=10000',
}

如果文件的大小低于指定的限制，URL-loader 会为您需要/导入的文件返回数据 URI，否则它会捆绑文件并返回 URL。

限制以字节为单位，因此 10000 大致意味着任何小于 10kB 的文件都将作为数据 URI 返回。如果您不指定限制，所有内容都将被编码为数据 URI。不过，我建议您仅将其用于小文件。

因此，一旦设置完毕，var smallImageUri = require('./smallImage.png'); 应该会为您提供所需的一切！如果smallImage.png 低于您配置的限制，则为数据 URI，或者捆绑图像较大时的 URL。

【讨论】：

【解决方案2】：

您可以尝试使用 gulp-css-base64 插件，该插件将从您的图像所在的文件夹中读取所有图像。每次运行 gulp 任务时，它都会使用新图像（或更新当前图像）更新 css 文件。

gulp.task('default', function () {
    return gulp.src('src/css/input.css')
        .pipe(cssBase64({
            baseDir: "../../images",
            maxWeightResource: 100,
            extensionsAllowed: ['.gif', '.jpg']
        }))
        .pipe(gulp.dest('dist'));
});

【讨论】：