Swizzling code I'm currently using to avoid this problem
```ts
export default function IdealImage(props: Props): JSX.Element {
const { img, ...propsRest } = props
// In dev env just use regular img with original file
if (typeof img === 'string' || 'default' in img) {
return (
// eslint-disable-next-line jsx-a11y/alt-text
)
}
return (
)
}
```
Have you read the Contributing Guidelines on issues?
Prerequisites
npm run clear
oryarn clear
command.rm -rf node_modules yarn.lock package-lock.json
and re-installing packages.Description
Image flashing when navigating back and forward using Ideal Image
A possible fix would be to use browser native image lazy loading
<img loading="lazy">
instead ofreact-ideal-image
(also posted in https://docusaurus.io/feature-requests/p/use-browser-lazy-loading-in-plugin-ideal-image)Swizzling code I'm currently using to avoid this problem
```ts export default function IdealImage(props: Props): JSX.Element { const { img, ...propsRest } = props // In dev env just use regular img with original file if (typeof img === 'string' || 'default' in img) { return ( // eslint-disable-next-line jsx-a11y/alt-textReproducible demo
No response
Steps to reproduce
Expected behavior
No flashing
Actual behavior
Flashing
https://github.com/facebook/docusaurus/assets/68118705/8285459b-0711-4a6b-ba89-d24d64eccf04
Your environment
Self-service