diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index 2cc4df5d779c5..14badae96694a 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -3935,6 +3935,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('can emit preloads for non-lazy images that are rendered', async () => {
function App() {
ReactDOM.preload('script', {as: 'script'});
diff --git a/packages/react-dom/src/shared/ReactDOMTypes.js b/packages/react-dom/src/shared/ReactDOMTypes.js
index 942515be5c81a..9b7ce63f6b111 100644
--- a/packages/react-dom/src/shared/ReactDOMTypes.js
+++ b/packages/react-dom/src/shared/ReactDOMTypes.js
@@ -21,6 +21,7 @@ export type PreloadOptions = {
imageSrcSet?: string,
imageSizes?: string,
referrerPolicy?: string,
+ media?: string,
};
export type PreloadModuleOptions = {
as?: string,