Image doesn't work when cross-origin.

[ngokevin]

The problem

Image component fails with cross-origin URL over the network.

Yes, the image has CORS headers.

I was able to patch it below.

Solution

Set image.crossOrigin = 'anonymous' in modules/ImageLoader and hiddenImage.crossOrigin = 'anonymous' in Image/index.

Then display an img tag, not the background image view. Perhaps this could be a prop, but background image URLs fail to load over CORS.

With my patch-package, my image shows.

diff --git a/node_modules/react-native-web/dist/exports/Image/.index.js.swp b/node_modules/react-native-web/dist/exports/Image/.index.js.swp
new file mode 100644
index 0000000..e652063
Binary files /dev/null and b/node_modules/react-native-web/dist/exports/Image/.index.js.swp differ
diff --git a/node_modules/react-native-web/dist/exports/Image/index.js b/node_modules/react-native-web/dist/exports/Image/index.js
index 5c25ebf..4c7bdb6 100644
--- a/node_modules/react-native-web/dist/exports/Image/index.js
+++ b/node_modules/react-native-web/dist/exports/Image/index.js
@@ -225,6 +225,7 @@ var Image = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var hiddenImage = displayImageUri ? createElement('img', {
     alt: accessibilityLabel || '',
     classList: [classes.accessibilityImage],
+    crossOrigin: 'anonymous',
     draggable: draggable || false,
     ref: hiddenImageRef,
     src: displayImageUri
@@ -309,14 +310,6 @@ var Image = /*#__PURE__*/React.forwardRef(function (props, ref) {
     pointerEvents: pointerEvents,
     ref: ref,
     style: [styles.root, hasTextAncestor && styles.inline, imageSizeStyle, flatStyle]
-  }), /*#__PURE__*/React.createElement(View, {
-    style: [styles.image, resizeModeStyles[resizeMode], {
-      backgroundImage: backgroundImage,
-      filter: filter
-    }, backgroundSize != null && {
-      backgroundSize: backgroundSize
-    }],
-    suppressHydrationWarning: true
   }), hiddenImage, createTintColorSVG(tintColor, filterRef.current));
 });
 Image.displayName = 'Image'; // $FlowIgnore: This is the correct type, but casting makes it unhappy since the variables aren't defined yet
@@ -338,9 +331,7 @@ ImageWithStatics.queryCache = function (uris) {
 var classes = css.create({
   accessibilityImage: _objectSpread(_objectSpread({}, StyleSheet.absoluteFillObject), {}, {
     height: '100%',
-    opacity: 0,
     width: '100%',
-    zIndex: -1
   })
 });
 var styles = StyleSheet.create({
diff --git a/node_modules/react-native-web/dist/modules/ImageLoader/index.js b/node_modules/react-native-web/dist/modules/ImageLoader/index.js
index 008d0d6..090bc6b 100644
--- a/node_modules/react-native-web/dist/modules/ImageLoader/index.js
+++ b/node_modules/react-native-web/dist/modules/ImageLoader/index.js
@@ -121,6 +121,7 @@ var ImageLoader = {
     id += 1;
     var image = new window.Image();
     image.onerror = onError;
+    image.crossOrigin = 'anonymous';
 
     image.onload = function (e) {
       // avoid blocking the main thread
diff --git a/node_modules/react-native-web/src/modules/ImageLoader/index.js b/node_modules/react-native-web/src/modules/ImageLoader/index.js
index db93fbf..6318b0a 100644
--- a/node_modules/react-native-web/src/modules/ImageLoader/index.js
+++ b/node_modules/react-native-web/src/modules/ImageLoader/index.js
@@ -117,6 +117,7 @@ const ImageLoader = {
     id += 1;
     const image = new window.Image();
     image.onerror = onError;
+    image.crossOrigin = 'anonymous';
     image.onload = (e) => {
       // avoid blocking the main thread
       const onDecode = () => onLoad({ nativeEvent: e });

How to reproduce

<Image source={{uri: 'https://static.thenounproject.com/png/55377-200.png'}}/>

Steps to reproduce:

1. Load https://static.thenounproject.com/png/55377-200.png into an Image on Chrome

Expected behavior

Image shows.