[fix] ImageLoader: ImageUriCache is not kept up to date with loaded images

Author: kidroca

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

@@ -300,7 +300,7 @@ const Image: React.AbstractComponent<
 
     function abortPendingRequest() {
       if (requestRef.current != null) {
-        ImageLoader.abort(requestRef.current);
+        ImageLoader.clear(requestRef.current);
         requestRef.current = null;
       }
     }

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

@@ -74,12 +74,13 @@ let id = 0;
 const requests = {};
 
 const ImageLoader = {
-  abort(requestId: number) {
-    let image = requests[`${requestId}`];
+  clear(requestId: number) {
+    const image = requests[`${requestId}`];
     if (image) {
       image.onerror = null;
       image.onload = null;
-      image = null;
+      ImageUriCache.remove(image.src);
+      image.src = '';
       delete requests[`${requestId}`];
     }
   },
@@ -102,7 +103,7 @@ const ImageLoader = {
         }
       }
       if (complete) {
-        ImageLoader.abort(requestId);
+        ImageLoader.clear(requestId);
         clearInterval(interval);
       }
     }
@@ -111,7 +112,7 @@ const ImageLoader = {
       if (typeof failure === 'function') {
         failure();
       }
-      ImageLoader.abort(requestId);
+      ImageLoader.clear(requestId);
       clearInterval(interval);
     }
   },
@@ -123,6 +124,7 @@ const ImageLoader = {
     const image = new window.Image();
     image.onerror = onError;
     image.onload = (e) => {
+      ImageUriCache.add(uri);
       // avoid blocking the main thread
       const onDecode = () => onLoad({ nativeEvent: e });
       if (typeof image.decode === 'function') {
@@ -140,17 +142,7 @@ const ImageLoader = {
   },
   prefetch(uri: string): Promise<void> {
     return new Promise((resolve, reject) => {
-      ImageLoader.load(
-        uri,
-        () => {
-          // 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.remove(uri);
-          resolve();
-        },
-        reject
-      );
+      ImageLoader.load(uri, resolve, reject);
     });
   },
   queryCache(uris: Array<string>): Promise<{| [uri: string]: 'disk/memory' |}> {