fix: support image source objects

Author: Julian Hundeloh

packages/react-native-web/src/exports/Image/ImageUriCache.js

@@ -7,57 +7,60 @@
  * @flow
  */
 
-const dataUriPattern = /^data:/;
-
 export default class ImageUriCache {
   static _maximumEntries: number = 256;
   static _entries = {};
 
-  static has(uri: string) {
+  static has(cacheId: string) {
+    const entries = ImageUriCache._entries;
+    return Boolean(entries[cacheId]);
+  }
+
+  static get(cacheId: string) {
     const entries = ImageUriCache._entries;
-    const isDataUri = dataUriPattern.test(uri);
-    return isDataUri || Boolean(entries[uri]);
+    return entries[cacheId];
   }
 
-  static add(uri: string) {
+  static add(cacheId: string, displayImageUri: string) {
     const entries = ImageUriCache._entries;
     const lastUsedTimestamp = Date.now();
-    if (entries[uri]) {
-      entries[uri].lastUsedTimestamp = lastUsedTimestamp;
-      entries[uri].refCount += 1;
+    if (entries[cacheId]) {
+      entries[cacheId].lastUsedTimestamp = lastUsedTimestamp;
+      entries[cacheId].refCount += 1;
     } else {
-      entries[uri] = {
+      entries[cacheId] = {
         lastUsedTimestamp,
-        refCount: 1
+        refCount: 1,
+        displayImageUri
       };
     }
   }
 
-  static remove(uri: string) {
+  static remove(cacheId: string) {
     const entries = ImageUriCache._entries;
-    if (entries[uri]) {
-      entries[uri].refCount -= 1;
+    if (entries[cacheId]) {
+      entries[cacheId].refCount -= 1;
     }
     // Free up entries when the cache is "full"
     ImageUriCache._cleanUpIfNeeded();
   }
 
   static _cleanUpIfNeeded() {
     const entries = ImageUriCache._entries;
-    const imageUris = Object.keys(entries);
+    const cacheIds = Object.keys(entries);
 
-    if (imageUris.length + 1 > ImageUriCache._maximumEntries) {
+    if (cacheIds.length + 1 > ImageUriCache._maximumEntries) {
       let leastRecentlyUsedKey;
       let leastRecentlyUsedEntry;
 
-      imageUris.forEach(uri => {
-        const entry = entries[uri];
+      cacheIds.forEach(cacheId => {
+        const entry = entries[cacheId];
         if (
           (!leastRecentlyUsedEntry ||
             entry.lastUsedTimestamp < leastRecentlyUsedEntry.lastUsedTimestamp) &&
           entry.refCount === 0
         ) {
-          leastRecentlyUsedKey = uri;
+          leastRecentlyUsedKey = cacheId;
           leastRecentlyUsedEntry = entry;
         }
       });

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

@@ -38,41 +38,57 @@ const getImageState = (uri, shouldDisplaySource) => {
 };
 
 const resolveAssetDimensions = source => {
-  if (typeof source === 'number') {
-    const { height, width } = getAssetByID(source);
-    return { height, width };
-  } else if (typeof source === 'object') {
-    const { height, width } = source;
-    return { height, width };
-  }
+  return {
+    height: source.height,
+    width: source.width
+  };
 };
 
 const svgDataUriPattern = /^(data:image\/svg\+xml;utf8,)(.*)/;
-const resolveAssetUri = source => {
-  let uri = '';
+const resolveAssetSource = source => {
+  let resolvedSource = {
+    method: 'GET',
+    uri: '',
+    headers: {},
+    width: undefined,
+    height: undefined
+  };
   if (typeof source === 'number') {
     // get the URI from the packager
     const asset = getAssetByID(source);
     const scale = asset.scales[0];
     const scaleSuffix = scale !== 1 ? `@${scale}x` : '';
-    uri = asset ? `${asset.httpServerLocation}/${asset.name}${scaleSuffix}.${asset.type}` : '';
+    resolvedSource.uri = asset
+      ? `${asset.httpServerLocation}/${asset.name}${scaleSuffix}.${asset.type}`
+      : '';
+    resolvedSource.width = asset.width;
+    resolvedSource.height = asset.height;
   } else if (typeof source === 'string') {
-    uri = source;
-  } else if (source && typeof source.uri === 'string') {
-    uri = source.uri;
+    resolvedSource.uri = source;
+  } else if (typeof source === 'object') {
+    resolvedSource = {
+      ...resolvedSource,
+      ...source
+    };
   }
 
-  if (uri) {
-    const match = uri.match(svgDataUriPattern);
+  if (resolvedSource.uri) {
+    const match = resolvedSource.uri.match(svgDataUriPattern);
     // inline SVG markup may contain characters (e.g., #, ") that need to be escaped
     if (match) {
       const [, prefix, svg] = match;
       const encodedSvg = encodeURIComponent(svg);
-      return `${prefix}${encodedSvg}`;
+      resolvedSource.uri = `${prefix}${encodedSvg}`;
     }
   }
 
-  return uri;
+  return resolvedSource;
+};
+const getCacheId = source => {
+  return JSON.stringify(resolveAssetSource(source));
+};
+const getCacheUrl = e => {
+  return e.path && e.path[0].src;
 };
 
 let filterId = 0;
@@ -91,7 +107,8 @@ const createTintColorSVG = (tintColor, id) =>
 
 type State = {
   layout: Object,
-  shouldDisplaySource: boolean
+  shouldDisplaySource: boolean,
+  displayImageUri: string
 };
 
 class Image extends Component<*, State> {
@@ -130,10 +147,10 @@ class Image extends Component<*, State> {
   }
 
   static prefetch(uri) {
-    return ImageLoader.prefetch(uri).then(() => {
+    return ImageLoader.prefetch(uri).then(e => {
       // Add the uri to the cache so it can be immediately displayed when used
       // but also immediately remove it to correctly reflect that it has no active references
-      ImageUriCache.add(uri);
+      ImageUriCache.add(uri, getCacheUrl(e));
       ImageUriCache.remove(uri);
     });
   }
@@ -157,10 +174,19 @@ class Image extends Component<*, State> {
   constructor(props, context) {
     super(props, context);
     // If an image has been loaded before, render it immediately
-    const uri = resolveAssetUri(props.source);
-    const shouldDisplaySource = ImageUriCache.has(uri);
-    this.state = { layout: {}, shouldDisplaySource };
-    this._imageState = getImageState(uri, shouldDisplaySource);
+    const cacheId = getCacheId(props.source);
+    const resolvedSource = resolveAssetSource(props.source);
+    const resolvedDefaultSource = resolveAssetSource(props.defaultSource);
+    const cachedSource = ImageUriCache.get(cacheId);
+    const shouldDisplaySource = !!cachedSource;
+    this.state = {
+      layout: {},
+      shouldDisplaySource,
+      displayImageUri: shouldDisplaySource
+        ? cachedSource.uri
+        : resolvedDefaultSource.uri || resolvedSource.uri
+    };
+    this._imageState = getImageState(resolvedSource.uri, shouldDisplaySource);
     this._filterId = filterId;
     filterId++;
   }
@@ -175,14 +201,14 @@ class Image extends Component<*, State> {
   }
 
   componentDidUpdate(prevProps) {
-    const prevUri = resolveAssetUri(prevProps.source);
-    const uri = resolveAssetUri(this.props.source);
+    const prevCacheId = getCacheId(prevProps.source);
+    const cacheId = getCacheId(this.props.source);
     const hasDefaultSource = this.props.defaultSource != null;
-    if (prevUri !== uri) {
-      ImageUriCache.remove(prevUri);
-      const isPreviouslyLoaded = ImageUriCache.has(uri);
-      isPreviouslyLoaded && ImageUriCache.add(uri);
-      this._updateImageState(getImageState(uri, isPreviouslyLoaded), hasDefaultSource);
+    if (prevCacheId !== cacheId) {
+      ImageUriCache.remove(prevCacheId);
+      const isPreviouslyLoaded = ImageUriCache.has(cacheId);
+      isPreviouslyLoaded && ImageUriCache.add(cacheId);
+      this._updateImageState(getImageState(cacheId, isPreviouslyLoaded), hasDefaultSource);
     } else if (hasDefaultSource && prevProps.defaultSource !== this.props.defaultSource) {
       this._updateImageState(this._imageState, hasDefaultSource);
     }
@@ -192,14 +218,14 @@ class Image extends Component<*, State> {
   }
 
   componentWillUnmount() {
-    const uri = resolveAssetUri(this.props.source);
-    ImageUriCache.remove(uri);
+    const cacheId = getCacheId(this.props.source);
+    ImageUriCache.remove(cacheId);
     this._destroyImageLoader();
     this._isMounted = false;
   }
 
   render() {
-    const { shouldDisplaySource } = this.state;
+    const { displayImageUri, shouldDisplaySource } = this.state;
     const {
       accessibilityLabel,
       accessible,
@@ -233,8 +259,7 @@ class Image extends Component<*, State> {
       }
     }
 
-    const selectedSource = shouldDisplaySource ? source : defaultSource;
-    const displayImageUri = resolveAssetUri(selectedSource);
+    const selectedSource = resolveAssetSource(shouldDisplaySource ? source : defaultSource);
     const imageSizeStyle = resolveAssetDimensions(selectedSource);
     const backgroundImage = displayImageUri ? `url("${displayImageUri}")` : null;
     const flatStyle = { ...StyleSheet.flatten(this.props.style) };
@@ -312,8 +337,11 @@ class Image extends Component<*, State> {
   _createImageLoader() {
     const { source } = this.props;
     this._destroyImageLoader();
-    const uri = resolveAssetUri(source);
-    this._imageRequestId = ImageLoader.load(uri, this._onLoad, this._onError);
+    this._imageRequestId = ImageLoader.load(
+      resolveAssetSource(source),
+      this._onLoad,
+      this._onError
+    );
     this._onLoadStart();
   }
 
@@ -356,7 +384,7 @@ class Image extends Component<*, State> {
     if (onError) {
       onError({
         nativeEvent: {
-          error: `Failed to load resource ${resolveAssetUri(source)} (404)`
+          error: `Failed to load resource ${resolveAssetSource(source).uri} (404)`
         }
       });
     }
@@ -366,7 +394,7 @@ class Image extends Component<*, State> {
   _onLoad = e => {
     const { onLoad, source } = this.props;
     const event = { nativeEvent: e };
-    ImageUriCache.add(resolveAssetUri(source));
+    ImageUriCache.add(getCacheId(source), getCacheUrl(e));
     this._updateImageState(STATUS_LOADED);
     if (onLoad) {
       onLoad(event);
@@ -394,14 +422,26 @@ class Image extends Component<*, State> {
   };
 
   _updateImageState(status: ?string, hasDefaultSource: ?boolean = false) {
+    const { source } = this.props;
     this._imageState = status;
     const shouldDisplaySource =
       this._imageState === STATUS_LOADED ||
       (this._imageState === STATUS_LOADING && !hasDefaultSource);
+    const cachedId = getCacheId(source);
+    const { displayImageUri } = ImageUriCache.has(cachedId)
+      ? ImageUriCache.get(cachedId)
+      : this.state;
+
     // only triggers a re-render when the image is loading and has no default image (to support PJPEG), loaded, or failed
-    if (shouldDisplaySource !== this.state.shouldDisplaySource) {
+    if (
+      shouldDisplaySource !== this.state.shouldDisplaySource ||
+      displayImageUri !== this.state.displayImageUri
+    ) {
       if (this._isMounted) {
-        this.setState(() => ({ shouldDisplaySource }));
+        this.setState(() => ({
+          shouldDisplaySource,
+          displayImageUri
+        }));
       }
     }
   }

packages/react-native-web/src/modules/ImageLoader/index.js

@@ -9,6 +9,7 @@
 
 let id = 0;
 const requests = {};
+const dataUriPattern = /^data:/;
 
 const ImageLoader = {
   abort(requestId: number) {
@@ -21,7 +22,7 @@ const ImageLoader = {
   getSize(uri, success, failure) {
     let complete = false;
     const interval = setInterval(callback, 16);
-    const requestId = ImageLoader.load(uri, callback, errorCallback);
+    const requestId = ImageLoader.load({ uri }, callback, errorCallback);
 
     function callback() {
       const image = requests[`${requestId}`];
@@ -46,8 +47,11 @@ const ImageLoader = {
       clearInterval(interval);
     }
   },
-  load(uri, onLoad, onError): number {
+  load(source, onLoad, onError): number {
+    const { uri, method, headers, body } = { uri: '', method: 'GET', headers: {}, ...source };
     id += 1;
+
+    // Create image
     const image = new window.Image();
     image.onerror = onError;
     image.onload = e => {
@@ -62,13 +66,54 @@ const ImageLoader = {
         setTimeout(onDecode, 0);
       }
     };
-    image.src = uri;
     requests[`${id}`] = image;
+
+    // If the important source properties are empty, return the image directly
+    if (!source || !uri) {
+      return id;
+    }
+
+    // If the image is a dataUri, display it directly via image
+    const isDataUri = dataUriPattern.test(uri);
+    if (isDataUri) {
+      image.src = uri;
+      return id;
+    }
+
+    // If the image can be retrieved via GET, we can fallback to image loading method
+    if (method === 'GET') {
+      image.src = uri;
+      return id;
+    }
+
+    // Load image via XHR
+    const request = new window.XMLHttpRequest();
+    request.open(method, uri);
+    request.responseType = 'blob';
+    request.withCredentials = false;
+    request.onerror = () => {
+      // Fall back to image (e.g. for CORS issues)
+      image.src = uri;
+    };
+
+    // Add request headers
+    for (const [name, value] of Object.entries(headers)) {
+      request.setRequestHeader(name, value);
+    }
+
+    // When the request finished loading, pass it on to the image
+    request.onload = () => {
+      image.src = window.URL.createObjectURL(request.response);
+    };
+
+    // Send the request
+    request.send(body);
+
     return id;
   },
   prefetch(uri): Promise {
     return new Promise((resolve, reject) => {
-      ImageLoader.load(uri, resolve, reject);
+      ImageLoader.load({ uri }, resolve, reject);
     });
   }
 };