[add] load images with http headers

Author: kidroca

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

@@ -190,7 +190,7 @@ const Image: React.AbstractComponent<
       );
     }
   }
-
+  const [loadedUri, setLoadedUri] = React.useState('');
   const [state, updateState] = React.useState(() => {
     const uri = resolveAssetUri(source);
     if (uri != null) {
@@ -215,7 +215,7 @@ const Image: React.AbstractComponent<
     filterRef.current
   );
   const resizeMode = props.resizeMode || _resizeMode || 'cover';
-  const selectedSource = shouldDisplaySource ? source : defaultSource;
+  const selectedSource = shouldDisplaySource ? loadedUri : defaultSource;
   const displayImageUri = resolveAssetUri(selectedSource);
   const imageSizeStyle = resolveAssetDimensions(selectedSource);
   const backgroundImage = displayImageUri ? `url("${displayImageUri}")` : null;
@@ -261,22 +261,23 @@ const Image: React.AbstractComponent<
   }
 
   // Image loading
-  const uri = resolveAssetUri(source);
   React.useEffect(() => {
     abortPendingRequest();
 
+    const uri = resolveAssetUri(source);
     if (uri != null) {
       updateState(LOADING);
       if (onLoadStart) {
         onLoadStart();
       }
 
       requestRef.current = ImageLoader.load(
-        uri,
-        function load(e) {
+        { uri, headers: source?.headers },
+        function load(result) {
           updateState(LOADED);
+          setLoadedUri(result.uri);
           if (onLoad) {
-            onLoad(e);
+            onLoad(result);
           }
           if (onLoadEnd) {
             onLoadEnd();
@@ -306,7 +307,7 @@ const Image: React.AbstractComponent<
     }
 
     return abortPendingRequest;
-  }, [uri, requestRef, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
+  }, [source, updateState, onError, onLoad, onLoadEnd, onLoadStart]);
 
   return (
     <View