Bug: React 19 renderToString() injects <link rel="preload"> for all <img> tags
Running
import { renderToString } from "react-dom/server";
let str = renderToString(<img src="my/image.png" />);
console.log(str);
unexpectedly produces the html string:
<link rel="preload" as="image" href="my/image.png"/><img src="my/image.png"/>
which I'd expect to only occur when I explicitly ask for one via the preload() API. I can't see anywhere in the documentation that suggests that preload links are auto injected based on the simple presence of an img tag, and it seems like surprising behavior.
React version: 19.1.1
Steps To Reproduce
- Run the sandbox or the code above and see that the output matches.
Link to code example:
https://codesandbox.io/p/sandbox/react-preload-link-injection-bug-6s7lvq
The current behavior
The example produces the string:
<link rel="preload" as="image" href="my/image.png"/><img src="my/image.png"/>
The expected behavior
I'd expect the example to produce the string:
<img src="my/image.png"/>
since I did not explicitly ask for a preload link via preload(). This is a notable change from react 18.
@bbycroft Thanks for reporting this issue.
I was able to reproduce the behavior you described using React 19.1.1 — rendering an with renderToString automatically injects a tag before the image.
This seems like a regression compared to React 18, where the output did not include any automatic preload link. The current behavior is unexpected since the documentation does not mention preload injection unless preload() is explicitly used.
It would be helpful if the team could clarify whether:
This change is intentional (a new default optimization in React 19).
Or if this is indeed a bug/regression that should be addressed.
Either way, clearer documentation around this behavior would be valuable to avoid confusion.
Would it not be better to add preload if the IMG elements have loading='eager', which shows intent to eagerly load the image.
IMG elements without loading eager could be using some client side replacement for the images or something.
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!
This still appears to be an issue that can create performance issue.