- Notifications
You must be signed in to change notification settings - Fork 1.8k
Open
Labels
project:react-native-webIssue associated with react-native-webIssue associated with react-native-web
Milestone
Description
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:
- Load
https://static.thenounproject.com/png/55377-200.pnginto an Image on Chrome
Expected behavior
Image shows.
Metadata
Metadata
Assignees
Labels
project:react-native-webIssue associated with react-native-webIssue associated with react-native-web