webpack-contrib/image-minimizer-webpack-plugin

Inline UTF8 SVG URL gets encoded into base64, but the base64 extension is missing

patrikjuvonen opened this issue · 2 comments

patrikjuvonen commented

Bug report

Preinlined SVG does not show in browser.

Actual Behavior

A preinlined UTF8 SVG gets encoded correctly into base64 when using ImageMinimizerPlugin.imageminGenerate, but the standard base64 extension is not added to the final output, so the image does not show in browser.

data:image/svg+xml;utf8,[...]

Is this a bug, or am I using the plugin wrong?

Expected Behavior

The transformer should add the standard base64 extension in order for the image to show.

data:image/svg+xml;utf8;base64,[...]

How Do We Reproduce?

  1. Download reproduction gist: https://gist.github.com/patrikjuvonen/8c1bb10b1b9c56e9cdba1f48c99a4c72
  2. Run npm install
  3. Postinstall will automatically run webpack --mode production
  4. See the SVG data URI output at dist/main.css, it does not have the standard base64 extension in it
  5. Open test.html in your browser, you can see a blank screen
  6. Add the standard base64 extension to the data URI manually (data:image/svg+xml;utf8;base64,[...])
  7. Open test.html in your browser again, you can see a checkmark icon on the body element

Please paste the results of npx webpack-cli info here, and mention other relevant information

Test bench 1

  System:
    OS: Linux 5.4 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (2) x64 AMD EPYC 7542 32-Core Processor
    Memory: 343.90 MB / 3.84 GB
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.3.0 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Packages:
    css-loader: ^6.5.1 => 6.5.1
    image-minimizer-webpack-plugin: ^3.2.0 => 3.2.0
    webpack: ^5.65.0 => 5.65.0
    webpack-cli: ^4.9.1 => 4.9.1

Test bench 2

  System:
    OS: macOS 12.1
    CPU: (8) arm64 Apple M1
    Memory: 3.56 GB / 16.00 GB
  Binaries:
    Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node
    npm: 8.3.0 - ~/.nvm/versions/node/v16.13.1/bin/npm
  Browsers:
    Chrome: 96.0.4664.110
    Firefox: 95.0.2
    Safari: 15.2
  Packages:
    css-loader: ^6.5.1 => 6.5.1
    image-minimizer-webpack-plugin: ^3.2.0 => 3.2.0
    webpack: ^5.65.0 => 5.65.0
    webpack-cli: ^4.9.1 => 4.9.1

Test bench 3

  System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 23.97 GB / 31.92 GB
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.3.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 96.0.4664.110
    Edge: Spartan (44.19041.1266.0), Chromium (96.0.1054.62)
    Internet Explorer: 11.0.19041.1202
  Packages:
    css-loader: ^6.5.1 => 6.5.1
    image-minimizer-webpack-plugin: ^3.2.0 => 3.2.0
    webpack: ^5.65.0 => 5.65.0
    webpack-cli: ^4.9.1 => 4.9.1
alexander-akait commented

hm, there is another problem, we should not convert it to base64, we should just compress image and return it to webpack, and webpack will take a care about base64 (or not) using https://webpack.js.org/configuration/module/#ruleparserdataurlcondition

  • 👍1
patrikjuvonen commented

hm, there is another problem, we should not convert it to base64, we should just compress image and return it to webpack, and webpack will take a care about base64 (or not) using https://webpack.js.org/configuration/module/#ruleparserdataurlcondition

Thank you for the quick response and fix!

  • 👍1