Image: support ImageSource with headers

[kidroca]

Details

Extend ImageLoader functionality to be able to work with image sources containing headers

We preserve the existing strategy that works with image.src for cases where source is just an uri with no headers

When source contain headers we make a fetch request and then render a local url for the downloaded blob (URL.createObjectURL)

Fixed Issues

• fixes #1019

Test Strategy

1. Verify existing Image functionality has no regressions

   • build web and examples: npm run dev -w react-native-web and npm run dev -w react-native-web-examples
   • open the examples page and go to Image: http://localhost:3000/image
   • see images are loading
   • take a screenshot and do the same from the master branch. You can switch back and forth and verify the image are loading the same way

2. Verify Images with headers can be loaded

   • build web and examples: npm run dev -w react-native-web and npm run dev -w react-native-web-examples
   • open the examples page and go to Image: http://localhost:3000/image
   • modify sourceWithHeaders here packages/react-native-web-examples/pages/image/index.js and try to load images from a server that expects a GET request with a header
   • verify the image is loading on the examples page (near the bottom, labeled: "With Headers")

Example Project Screenshot

The code is also tested in a standalone project and it loads images with headers successfully

[codesandbox-ci[bot]]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 616975e20f4875090de4bec20d3dd60ec4aa8e01:

Sandbox	Source
react-native-web-examples	Configuration

[necolas]

It would have been a good idea to ask about this before writing the PR, as there are numerous other plans around Image.

There's this PR for crossOrigin support https://github.com/necolas/react-native-web/pull/2207

This milestone https://github.com/necolas/react-native-web/milestone/18

And a parallel effort to support W3C props on Image https://github.com/facebook/react-native/issues/34424#:~:text=native%2Did%22%0A%3E-,%3CImage%3E%20props,-These%20props%20should

[kidroca]

Hi @necolas I thought this PR would be a nice place to get the conversation going

This PR is following the original idea to support headers via XHR, though I've opted to use fetch since the minimal browser requirements allow it

Overall I think the changes here are compatible with #2207

A big chunk of the changes comes from added tests And the change for handling source objects in hook dependencies, which is also a problem for #2207 - https://github.com/necolas/react-native-web/pull/2207/files#diff-7cb74a3a32d73857be80350ecd1ea131d256bd5af11d2000e4fc2d03c2230584R222-R223

The rest of the changes are small cleanups and moving existing logic - I can revert some of these namely resolveAssetUri to avoid conflicts with the other PR

If there are any problems, I'm happy to discuss and modify the PR

[necolas]

Please resolve the conflicts with master

[kidroca]

There are no conflicts with master right now

There would be conflicts for the PR that happens to be merged last due to the changes to resolveAssetUri I made

Since the other PR just moves the function without changing the logic, it might be easier to do the same after this PR is merged Alternatively I can apply the change after the other PR is merged

[necolas]

Here's what GitHub shows me on this PR

[necolas]

If you could rebase/squash your 20 commits into just a few, that would help too. Thanks

[NilsBaumgartner1994]

Push, we need Authorization headers

[Beamanator]

@necolas any chance you or a fellow maintainer can check out these changes? We're fine to wait since, as you mentioned before, you have many updates planned - we're just hoping to get a possible timeline when this could get reviewed.

[necolas]

It looks like the author is still working on the patch. It needs unit tests and the suggestion to make changes to make testing easier makes sense to me.

[necolas]

What's next for this PR? The PR in the fork had no new unit tests and this one hasn't been updated for 2 weeks

[kidroca]

I haven't synced my latest changes here, and I still need to write some unit tests I'll post an update when I'm done

[necolas]

Hi, please could you rebase this. Now that 0.19 is done, the 0.20 release will be focused on Image changes.

[kidroca]

✅ Rebased

[necolas]

This PR was merged into the 0.20-dev branch https://github.com/necolas/react-native-web/pull/2508