Support headers [crossOrigin and referralPolicy] in Image without src and srcSet and only remote source.uri #14521
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "prerelease", | ||
| "comment": "Support headers [crossOrigin and referralPolicy] in Image without srcset or src and only source.uri", | ||
| "packageName": "react-native-windows", | ||
| "email": "54227869+anupriya13@users.noreply.github.com", | ||
| "dependentChangeType": "patch" | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| /** | ||
| * Copyright (c) Meta Platforms, Inc. and affiliates. | ||
| * | ||
| * This source code is licensed under the MIT license found in the | ||
| * LICENSE file in the root directory of this source tree. | ||
| * | ||
| * @flow strict-local | ||
| * @format | ||
| */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| import type {ResolvedAssetSource} from './AssetSourceResolver'; | ||
| import type {ImageProps} from './ImageProps'; | ||
|
|
||
| import resolveAssetSource from './resolveAssetSource'; | ||
|
|
||
| /** | ||
| * A function which returns the appropriate value for image source | ||
| * by resolving the `source`, `src` and `srcSet` props. | ||
| */ | ||
| export function getImageSourcesFromImageProps( | ||
| imageProps: ImageProps, | ||
| ): ?ResolvedAssetSource | $ReadOnlyArray<{uri: string, ...}> { | ||
| let source = resolveAssetSource(imageProps.source); | ||
|
|
||
| let sources; | ||
|
|
||
| const {crossOrigin, referrerPolicy, src, srcSet, width, height} = imageProps; | ||
|
|
||
| const headers: {[string]: string} = {}; | ||
| if (crossOrigin === 'use-credentials') { | ||
| headers['Access-Control-Allow-Credentials'] = 'true'; | ||
| } | ||
| if (referrerPolicy != null) { | ||
| headers['Referrer-Policy'] = referrerPolicy; | ||
| } | ||
| if (srcSet != null) { | ||
| const sourceList = []; | ||
| const srcSetList = srcSet.split(', '); | ||
| // `src` prop should be used with default scale if `srcSet` does not have 1x scale. | ||
| let shouldUseSrcForDefaultScale = true; | ||
| srcSetList.forEach(imageSrc => { | ||
| const [uri, xScale = '1x'] = imageSrc.split(' '); | ||
| if (!xScale.endsWith('x')) { | ||
| console.warn( | ||
| 'The provided format for scale is not supported yet. Please use scales like 1x, 2x, etc.', | ||
| ); | ||
| } else { | ||
| const scale = parseInt(xScale.split('x')[0], 10); | ||
| if (!isNaN(scale)) { | ||
| // 1x scale is provided in `srcSet` prop so ignore the `src` prop if provided. | ||
| shouldUseSrcForDefaultScale = | ||
| scale === 1 ? false : shouldUseSrcForDefaultScale; | ||
| sourceList.push({headers: headers, scale, uri, width, height}); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
| if (shouldUseSrcForDefaultScale && src != null) { | ||
| sourceList.push({ | ||
| headers: headers, | ||
| scale: 1, | ||
| uri: src, | ||
| width, | ||
| height, | ||
| }); | ||
| } | ||
| if (sourceList.length === 0) { | ||
| console.warn('The provided value for srcSet is not valid.'); | ||
| } | ||
|
|
||
| sources = sourceList; | ||
| } else if (src != null) { | ||
| sources = [{uri: src, headers: headers, width, height}]; | ||
| } // [Windows | ||
| else if (source != null && source.uri) { | ||
|
There was a problem hiding this comment. Why is this different on windows? -- Is this something that is missing on the other platforms in core too? There was a problem hiding this comment. It should be on other platforms too. Not able to test exactly in other platforms. I followed instructions for overriding and it mentioned to add comment for Windows. There was a problem hiding this comment.
Just clarifying here, the instructions state to surround any changes you made in the file with window comments. Did you change this file at all? Are the changes here not in the upstream file? If not, we can follow-up and fix it upstream :) There was a problem hiding this comment. Yes I did change the file and added this else if condition. There was a problem hiding this comment. Added below code in line 76 of ImageSourceUtils.js: |
||
| sources = [{...source, headers}]; | ||
| } // [Windows | ||
| else { | ||
| sources = source; | ||
| } | ||
| return sources; | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is the patch made in ImageSourceUtils.js needed in upstream too? If so, we will want to create an issue and link it here to fix upstream
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh okay, I have already created an issue. Let me update the issue number then.
Yes, it's needed in upstream! It looks like a bug.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If this is a bug in upstream, and one that doesn't have any current partner ask to require an immediate fix in windows, we should just fix the issue upstream and save the effort of forking/unforking.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@acoates-ms Do you mean I should raise this PR in react-native repo instead?