diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index 741e2390c50a3..9ded4826aaf5b 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -4261,6 +4261,91 @@ body {
);
});
+ it('should handle media on image preload', async () => {
+ function App({isClient}) {
+ ReactDOM.preload('/server', {
+ as: 'image',
+ imageSrcSet: '/server',
+ imageSizes: '100vw',
+ media: 'print and (min-width: 768px)',
+ });
+
+ if (isClient) {
+ ReactDOM.preload('/client', {
+ as: 'image',
+ imageSrcSet: '/client',
+ imageSizes: '100vw',
+ media: 'screen and (max-width: 480px)',
+ });
+ }
+
+ return (
+
+ hello
+
+ );
+ }
+
+ await act(() => {
+ renderToPipeableStream().pipe(writable);
+ });
+ expect(getMeaningfulChildren(document)).toEqual(
+
+
+
+
+ hello
+ ,
+ );
+
+ const root = ReactDOMClient.hydrateRoot(document, );
+ await waitForAll([]);
+ expect(getMeaningfulChildren(document)).toEqual(
+
+
+
+
+ hello
+ ,
+ );
+
+ root.render();
+ await waitForAll([]);
+ expect(getMeaningfulChildren(document)).toEqual(
+
+
+
+
+
+ hello
+ ,
+ );
+ });
+
it('should warn if you preload a stylesheet and then render a style tag with the same href', async () => {
const style = 'body { color: red; }';
function App() {
diff --git a/packages/react-dom/src/shared/ReactDOMFloat.js b/packages/react-dom/src/shared/ReactDOMFloat.js
index 2effe174416be..4aa364af318c7 100644
--- a/packages/react-dom/src/shared/ReactDOMFloat.js
+++ b/packages/react-dom/src/shared/ReactDOMFloat.js
@@ -139,6 +139,7 @@ export function preload(href: string, options: PreloadOptions) {
: undefined,
imageSizes:
typeof options.imageSizes === 'string' ? options.imageSizes : undefined,
+ media: typeof options.media === 'string' ? options.media : undefined,
});
}
// We don't error because preload needs to be resilient to being called in a variety of scopes
diff --git a/packages/react-dom/src/shared/ReactDOMTypes.js b/packages/react-dom/src/shared/ReactDOMTypes.js
index 7578e182ae7c8..0e6d76c6e919a 100644
--- a/packages/react-dom/src/shared/ReactDOMTypes.js
+++ b/packages/react-dom/src/shared/ReactDOMTypes.js
@@ -16,6 +16,7 @@ export type PreloadOptions = {
crossOrigin?: string,
integrity?: string,
type?: string,
+ media?: string,
nonce?: string,
fetchPriority?: FetchPriorityEnum,
imageSrcSet?: string,