Ideal-image: support non-blurry images in dev

[Irev-Dev]

🐛 Bug Report

@docusaurus/plugin-ideal-image doesn't work properly in dev, it never loads the full resolution images leaving only the blurry image like so.

It appears to be fine for production/when built.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

npx @docusaurus/init@latest init my-website classic
yarn add @docusaurus/plugin-ideal-image

add plugins: ['@docusaurus/plugin-ideal-image'], to docusaurus.config.js

add the following somewhere in markdown-features.mdx

import Image from '@theme/IdealImage';
import thumbnail from '../static/img/docusaurus.png';
<Image img={thumbnail} />

yarn start

navigate to http://localhost:3000/docs/markdown-features

Expected behavior

full resolution image would load

Actual Behavior

it remains blurry (and adds a bunch of white space below the image that's not there when the project is built)

The docusaurus logo is easily identifiable, but in a real scenario it's impossible to determine what the images are and so it so I end up building the project to review the docs. Here's an example of what that looks like.

Your Environment

• Docusaurus version used: 2.0.0-alpha.72
• Environment name and version: chrome Version 89.0.4389.114 (Official Build) (x86_64), Node v14.16.0
• Operating system and version (desktop or mobile): Mac Big Sur 11.1

Reproducible Demo

not possible it seems on codersandbox, I'm not sure if they do some dependencies magic that breaks with ideal image.
Here's a link anyway https://codesandbox.io/s/admiring-bell-phfxj?file=/docs/markdown-features.mdx
but it has the following error Module not found: Can't resolve '@theme/IdealImage' in '/sandbox/docs'

This seems like a different issue to #4255

[slorber]

Not 100% sure because the original author is not there anymore but I guess it was on purpose, as we don't want the dev server to resize all the images and slow down the DX, so I'll requalify this as a feature request.

If anyone wants to add support non-blurry ideal images in dev, PRs are welcome as long as they don't degrade the DX.

[Irev-Dev]

Okay thanks @slorber

I'll add that when ever you navigate to a page with an ideal image on it there is a cryptic error in the console too.
:3000/docs/:1 Uncaught (in promise)

[lukaskoeller]

I am experiencing the same behavior in development. Image stays blurry and there is an error saying Uncaught (in promise).

[azinit]

Still actual!

[Irev-Dev]

These days I'm just running yarn build && yarn serve for dev and rebuild each time I want to see updates as I find yarn dev unusable since my site has a lot of images.

[lex111]

This issue is really annoying, so I suggest not resizing images during development, will be fixed in #5540.

[Irev-Dev]

Thanks @lex111 😍