Ideal-image: support non-blurry images in dev #4588
Description
🐛 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-imageadd 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