IdealImage doesn't work based on docs in docusaurus.io

[massoudmaboudi]

🐛 Bug Report

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

Suppose you have the below code in any .md (doc or blog) file:

import Image from '@theme/IdealImage';
import docusaurus from '/img/docusaurus.png';

The below code works well:
<Image img={require('/img/docusaurus.png')}/>

But this one doesn't work:
<Image img={docusaurus}/>

This code used to work in 2.0.0-beta.6 but I tried 2.0.0-beta.7 and Canary 0.0.0-4102 and it doesn't work.

Also, this is based on docs below:
https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-ideal-image

I should mention when I run npm run build and then npm run serve it works well. But the problem happens when I use npm start only.

Have you read the Contributing Guidelines on issues?

Yes

[Josh-Cena]

I should mention when I run npm run build and then npm run serve it works well. But the problem happens when I use npm start only.

#5540 this disabled ideal image in dev. It's unclear why require works

[slorber]

It is because when the ideal image is disabled the file-loader returns {default: "URL"}

And we have:

  if (img.default) {
    return <img src={img.default} className={className} alt={alt} {...props} />;
  }

I guess this should make it work better:

  if (typeof img === "string" || typeof img.default === "string") {
    return <img src={img.default ?? img} className={className} alt={alt} {...props} />;
  }