diff --git a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap index e5999cd9..3d6d2a17 100644 --- a/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap +++ b/packages/react-native-web/src/exports/Image/__tests__/__snapshots__/index-test.js.snap @@ -317,14 +317,14 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`] >
{ loadCallback(); expect(container.firstChild).toMatchSnapshot(); }); + + test('it correctly selects the source scale', () => { + AssetRegistry.getAssetByID = jest.fn(() => ({ + httpServerLocation: 'static', + name: 'img', + scales: [1, 2, 3], + type: 'png' + })); + + PixelRatio.get = jest.fn(() => 1.0); + let { container } = render(); + expect(container.querySelector('img').src).toBe('http://localhost/static/img.png'); + + PixelRatio.get = jest.fn(() => 2.2); + ({ container } = render()); + expect(container.querySelector('img').src).toBe('http://localhost/static/img@2x.png'); + }); }); describe('prop "style"', () => { diff --git a/packages/react-native-web/src/exports/Image/index.js b/packages/react-native-web/src/exports/Image/index.js index e300c8fe..10d20d8f 100644 --- a/packages/react-native-web/src/exports/Image/index.js +++ b/packages/react-native-web/src/exports/Image/index.js @@ -18,6 +18,7 @@ import { getAssetByID } from '../../modules/AssetRegistry'; import resolveShadowValue from '../StyleSheet/resolveShadowValue'; import ImageLoader from '../../modules/ImageLoader'; import ImageUriCache from './ImageUriCache'; +import PixelRatio from '../PixelRatio'; import StyleSheet from '../StyleSheet'; import TextAncestorContext from '../Text/TextAncestorContext'; import View from '../View'; @@ -70,7 +71,14 @@ const resolveAssetUri = source => { if (typeof source === 'number') { // get the URI from the packager const asset = getAssetByID(source); - const scale = asset.scales[0]; + let scale = asset.scales[0]; + if (asset.scales.length > 1) { + const preferredScale = PixelRatio.get(); + // Get the scale which is closest to the preferred scale + scale = asset.scales.reduce((prev, curr) => + Math.abs(curr - preferredScale) < Math.abs(prev - preferredScale) ? curr : prev + ); + } const scaleSuffix = scale !== 1 ? `@${scale}x` : ''; uri = asset ? `${asset.httpServerLocation}/${asset.name}${scaleSuffix}.${asset.type}` : ''; } else if (typeof source === 'string') {