[change] Rework Image loading and source management logic

Since introducing the change to support headers changes to the original
changes are needed:
- support loading a default source with headers
- handle source object changes
- update uri resolving logic to handle blob URLs create by `URL.createObjectURL`
- move the URI/source resolving logic to the `ImageLoader`

Author: kidroca

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

@@ -329,14 +329,14 @@ exports[`components/Image prop "style" removes other unsupported View styles 1`]
 >
   <div
     class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-    style="filter: url(#tint-72);"
+    style="filter: url(#tint-86);"
   />
   <svg
     style="position: absolute; height: 0px; visibility: hidden; width: 0px;"
   >
     <defs>
       <filter
-        id="tint-72"
+        id="tint-86"
       >
         <feflood
           flood-color="blue"
@@ -378,7 +378,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
 >
   <div
     class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-4gszlv"
-    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-71);"
+    style="background-image: url(https://google.com/favicon.ico); filter: url(#tint-84);"
   />
   <img
     alt=""
@@ -391,7 +391,7 @@ exports[`components/Image prop "style" supports "tintcolor" property (convert to
   >
     <defs>
       <filter
-        id="tint-71"
+        id="tint-84"
       >
         <feflood
           flood-color="red"

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

@@ -21,9 +21,11 @@ describe('components/Image', () => {
   beforeEach(() => {
     ImageUriCache._entries = {};
     window.Image = jest.fn(() => ({}));
-    ImageLoader.load = jest.fn().mockImplementation((src, onLoad, onError) => {
-      onLoad(src);
-    });
+    ImageLoader.load = jest
+      .fn()
+      .mockImplementation((source, onLoad, onError) => {
+        onLoad({ source });
+      });
   });
 
   afterEach(() => {
@@ -309,6 +311,7 @@ describe('components/Image', () => {
         null,
         '',
         {},
+        [],
         { uri: '' },
         { uri: 'https://google.com' },
         { uri: 'https://google.com', headers: { 'x-custom-header': 'abc123' } }
@@ -369,19 +372,32 @@ describe('components/Image', () => {
     test('is correctly updated only when loaded if defaultSource provided', () => {
       const defaultUri = 'https://testing.com/preview.jpg';
       const uri = 'https://testing.com/fullSize.jpg';
-      let loadCallback;
-      ImageLoader.load = jest
-        .fn()
-        .mockImplementationOnce((_, onLoad, onError) => {
-          loadCallback = onLoad;
-        });
+      const calls = [];
+
+      // Capture calls and resolve them after render
+      ImageLoader.load = jest.fn().mockImplementation((source, onLoad) => {
+        calls.push({ source, onLoad });
+      });
+
       const { container } = render(
         <Image defaultSource={{ uri: defaultUri }} source={{ uri }} />
       );
+
+      // Both defaultSource and source are loaded at the same time
+      // But we assume defaultSource is loaded quicker
+      act(() => {
+        const call = calls.find(({ source }) => source.uri === defaultUri);
+        call.onLoad({ source: call.source });
+      });
+
       expect(container.firstChild).toMatchSnapshot();
+
+      // After a while the main source loads as well
       act(() => {
-        loadCallback({ uri });
+        const call = calls.find(({ source }) => source.uri === uri);
+        call.onLoad({ source: call.source });
       });
+
       expect(container.firstChild).toMatchSnapshot();
     });