[fix] Prevent constant Image reloading when source given as an object

Close #1770

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

@@ -328,14 +328,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-54);"
+    style="filter: url(#tint-57);"
   />
   <svg
     style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
   >
     <defs>
       <filter
-        id="tint-54"
+        id="tint-57"
       >
         <feflood
           flood-color="blue"
@@ -377,7 +377,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-53);"
+    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-56);"
   />
   <img
     alt=""
@@ -390,7 +390,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
   >
     <defs>
       <filter
-        id="tint-53"
+        id="tint-56"
       >
         <feflood
           flood-color="red"

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

@@ -183,6 +183,32 @@ describe('components/Image', () => {
       expect(onLoadStub.mock.calls.length).toBe(1);
       expect(onLoadEndStub.mock.calls.length).toBe(1);
     });
+
+    test('is not called on update if "uri" is the same and given as an object', () => {
+      const onLoadStartStub = jest.fn();
+      const onLoadStub = jest.fn();
+      const onLoadEndStub = jest.fn();
+      const { rerender } = render(
+        <Image
+          onLoad={onLoadStub}
+          onLoadEnd={onLoadEndStub}
+          onLoadStart={onLoadStartStub}
+          source={{ uri: 'https://test.com/img.jpg', width: 1, height: 1 }}
+        />
+      );
+      act(() => {
+        rerender(
+          <Image
+            onLoad={onLoadStub}
+            onLoadEnd={onLoadEndStub}
+            onLoadStart={onLoadStartStub}
+            source={{ uri: 'https://test.com/img.jpg', width: 1, height: 1 }}
+          />
+        );
+      });
+      expect(onLoadStub.mock.calls.length).toBe(1);
+      expect(onLoadEndStub.mock.calls.length).toBe(1);
+    });
   });
 
   describe('prop "resizeMode"', () => {

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

@@ -219,11 +219,10 @@ const Image = forwardRef<ImageProps, *>((props, ref) => {
   }
 
   // Image loading
+  const uri = resolveAssetUri(source);
   useEffect(() => {
     abortPendingRequest();
 
-    const uri = resolveAssetUri(source);
-
     if (uri != null) {
       updateState(LOADING);
       if (onLoadStart) {
@@ -265,7 +264,7 @@ const Image = forwardRef<ImageProps, *>((props, ref) => {
     }
 
     return abortPendingRequest;
-  }, [source, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
+  }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
 
   return (
     <View