[plugin-ideal-image] The plugin causes the image in background-image to not load correctly.

[inlann]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

It seems that the plugin-ideal-image plugin is intercepting the background-image: url('xxx') property set in the CSS, causing the image to not load correctly on the rendered page. When inspecting the element, you can see that the background-image in the styles is shown as background-image: url([object Object]); instead of the actual image URL:

My css code is:

.about-header {
  background-image: url(/static/img/about/header.png);
  background-size: contain;
  background-attachment: fixed;
  padding: 10rem 0 !important;
  color: black;
}

@media screen and (max-width: 996px) {
  .about-header {
    background-image: url(/static/img/about/narrow-header.png);
  }
}

I'm using docusaurus v3.7.0:

  "dependencies": {
    "@docusaurus/core": "^3.7.0",
    "@docusaurus/plugin-google-gtag": "^3.7.0",
    "@docusaurus/plugin-ideal-image": "^3.7.0",
    "@docusaurus/preset-classic": "^3.7.0",

My docusaurus config is :

  plugins:[
    [
      '@docusaurus/plugin-ideal-image',
      {
        quality: 70,
        max: 1030, // max resized image's size.
        min: 640, // min resized image's size. if original is lower, use that size.
        steps: 2, // the max number of images generated between min and max (inclusive)
        disableInDev: false,
      },
    ]
  ],

The render result is:

.about-header {
    background-image: url([object Object]);
    background-size: contain;
    background-attachment: fixed;
    padding: 10rem 0 !important;
    color: black;
}

Reproducible demo

No response

Steps to reproduce

Install and configurate the plugin-ideal-image plugin. Add a background-image in css to a div element.

Expected behavior

The background-image can render correctly, or the plugin-ideal-image plugin can be configured to exclude background images.

Actual behavior

The path string of the image is converted to an object:

.about-header {
    background-image: url([object Object]);
    background-size: contain;
    background-attachment: fixed;
    padding: 10rem 0 !important;
    color: black;
}

Your environment

• Public source code:
• Public site URL:
• Docusaurus version used: v3.7.0
• Environment name and version (e.g. Chrome 89, Node.js 16.4):
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): MacOS

Self-service

• I'd be willing to fix this bug myself.