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

Question

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

Answer 1

您可以尝试使用 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'));
});

Answer 2

webpack 的 url-loader 正是为此而生！

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

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

URL-loader returns 文件的数据 URI require/import 如果它的大小低于指定的限制，否则它会捆绑文件和 returns URL.

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

因此，设置完成后，var smallImageUri = require('./smallImage.png'); 应该可以满足您的需求！如果 smallImage.png 低于您配置的限制，则为数据 URI，或者 URL 到捆绑图像（当它更大时）。

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

Including base64 images from other files?

javascript

import

base64

webpack