Ideal image flashing when navigating back and forward

### Have you read the Contributing Guidelines on issues?

- [X] I have read the [Contributing Guidelines on issues](https://github.com/facebook/docusaurus/blob/main/CONTRIBUTING.md#issues).

### Prerequisites

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

### Description

Image flashing when navigating back and forward using Ideal Image

A possible fix would be to use browser native image lazy loading `` instead of [`react-ideal-image`](https://github.com/slorber/docusaurus-react-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-text

)
}

return (

)
}
```

### Reproducible demo

_No response_

### Steps to reproduce

1. Go to https://docusaurus.io/docs/playground
2. Navigate to another page
3. Navigate back

### Expected behavior

No flashing

### Actual behavior

Flashing

https://github.com/facebook/docusaurus/assets/68118705/8285459b-0711-4a6b-ba89-d24d64eccf04


### Your environment

- Public source code:
- Public site URL: https://docusaurus.io/docs/playground
- Docusaurus version used:
- Environment name and version (e.g. Chrome 89, Node.js 16.4):
- Operating system and version (e.g. Ubuntu 20.04.2 LTS):

### Self-service

- [X] I'd be willing to fix this bug myself.