react icon indicating copy to clipboard operation
react copied to clipboard

Bug: React 19 renderToString() injects <link rel="preload"> for all <img> tags

Open bbycroft opened this issue 4 months ago • 4 comments

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

  1. 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 avatar Aug 16 '25 10:08 bbycroft

@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.

aelric1 avatar Aug 16 '25 15:08 aelric1

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.

iankduffy avatar Aug 25 '25 17:08 iankduffy

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!

github-actions[bot] avatar Nov 23 '25 18:11 github-actions[bot]

This still appears to be an issue that can create performance issue.

iankduffy avatar Nov 27 '25 11:11 iankduffy