[fix] Image support for variable resolution images

Renders the asset scale which is closest to the window scale. Requires bundler integration.

Close #1456

Co-authored-by: David Calhoun <[email protected]>

Author: 2 people

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`]
 >
   <div
     class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="filter: url(#tint-31);"
+    style="filter: url(#tint-33);"
   />
   <svg
     style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
   >
     <defs>
       <filter
-        id="tint-31"
+        id="tint-33"
       >
         <feflood
           flood-color="blue"
@@ -366,7 +366,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
 >
   <div
     class="css-view-1dbjc4n r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-backgroundSize-4gszlv r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw"
-    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-30);"
+    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-32);"
   />
   <img
     alt=""
@@ -379,7 +379,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
   >
     <defs>
       <filter
-        id="tint-30"
+        id="tint-32"
       >
         <feflood
           flood-color="red"

packages/react-native-web/src/exports/Image/__tests__/index-test.js

@@ -1,9 +1,11 @@
 /* eslint-env jasmine, jest */
 /* eslint-disable react/jsx-no-bind */
 
+import * as AssetRegistry from '../../../modules/AssetRegistry';
 import Image from '../';
 import ImageLoader from '../../../modules/ImageLoader';
 import ImageUriCache from '../ImageUriCache';
+import PixelRatio from '../../PixelRatio';
 import React from 'react';
 import { render } from '@testing-library/react';
 
@@ -200,6 +202,23 @@ describe('components/Image', () => {
       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(<Image source={1} />);
+      expect(container.querySelector('img').src).toBe('http://localhost/static/img.png');
+
+      PixelRatio.get = jest.fn(() => 2.2);
+      ({ container } = render(<Image source={1} />));
+      expect(container.querySelector('img').src).toBe('http://localhost/static/[email protected]');
+    });
   });
 
   describe('prop "style"', () => {

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') {