diff --git a/packages/react-native-web/src/exports/Image/__tests__/index-test.js b/packages/react-native-web/src/exports/Image/__tests__/index-test.js index 6bdd81337b..13f654a27a 100644 --- a/packages/react-native-web/src/exports/Image/__tests__/index-test.js +++ b/packages/react-native-web/src/exports/Image/__tests__/index-test.js @@ -401,4 +401,31 @@ describe('components/Image', () => { }); }); }); + + describe('prop "src"', () => { + test('renders the image URI', () => { + const src = 'https://example.com/src.png'; + ImageUriCache.add(src); + + const { container } = render(); + + expect(container.querySelector('img').src).toBe(src); + ImageUriCache.remove(src); + }); + + test('takes precedence over "source"', () => { + const src = 'https://example.com/src.png'; + const sourceUri = 'https://example.com/source.png'; + ImageUriCache.add(src); + ImageUriCache.add(sourceUri); + + const { container } = render( + + ); + + expect(container.querySelector('img').src).toBe(src); + ImageUriCache.remove(src); + ImageUriCache.remove(sourceUri); + }); + }); }); diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js index f99faa7ec3..fa52d45cfb 100644 --- a/packages/react-native-web/src/exports/Image/index.js +++ b/packages/react-native-web/src/exports/Image/index.js @@ -188,10 +188,12 @@ const Image: React.AbstractComponent< onLoadEnd, onLoadStart, pointerEvents, - source, + source: sourceProp, + src, style, ...rest } = props; + const source = src != null ? src : sourceProp; const ariaLabel = _ariaLabel || accessibilityLabel; if (process.env.NODE_ENV !== 'production') { diff --git a/packages/react-native-web/src/exports/Image/types.js b/packages/react-native-web/src/exports/Image/types.js index e5d7240261..3ab28b11d7 100644 --- a/packages/react-native-web/src/exports/Image/types.js +++ b/packages/react-native-web/src/exports/Image/types.js @@ -98,6 +98,11 @@ export type ImageProps = { onProgress?: (e: any) => void, resizeMode?: ResizeMode, source?: Source, + /** + * A remote URL string for the image resource. Takes precedence over + * `source`. + */ + src?: string, style?: GenericStyleProp, tintColor?: ColorValue };