Angular 8 - 在生产版本中用内联 base64 替换图像 URL

Question

我正在尝试将某个页面的所有图像从文件路径更改为 base64，我读到感觉 Angular6 我们不能再向 Webpack 配置添加自定义代码，我不感兴趣使用像 @angular-builders/custom-webpack 这样的自定义生成器作为解决方案。

这可能吗？

提前致谢。

Answer 1

您可以创建一个节点脚本如下：

const fs = require('fs');
const base64Img = require('base64-img');

fs.readFile('my/file/path', 'utf8', (err, data) => {
  if (err) {
    return console.error(err);
  }
  const matches = data.match(/assets\/.*?(svg|png)/g);
  matches.forEach(match => {
    try {
      if (fs.existsSync(match)) {
        const convertedImage = base64Img.base64Sync(match);
        data = data.replace(match, `${convertedImage}`);
      }
    } catch (err) {
      console.error('Error: File not found', match);
    }
  });

  fs.writeFile('my/destination/file', data, 'utf8', (err) => {
    if (err) {
      return console.error(err);
    }
  });
});

这样，它会得到你需要替换文件的文件，搜索资产，然后将图片转换为base64并替换它们。最后一步是将结果写入新文件。

要运行这个，你需要安装base64-img库：npm i base64-img --save-dev。之后，您可以构建项目然后运行 node include-images.js.

为了方便起见，您还可以在 package.json 中添加一个脚本，例如：

"replace-images": "ng build && node include-images.js"

这可以是运行使用：npm run replace-images

请注意，我不喜欢将图像转换为 base64 并将其包含在捆绑包中，因为这会使捆绑包变得更大，并且会降低您的网站性能。

Angular 8 - 在生产版本中用内联 base64 替换图像 URL

Angular 8 - Replace image URL with inline base64 on production build

angular-cli

angular