Skip to content

Image: support ImageSource with headers#8

Closed
kidroca wants to merge 14 commits intoExpensify:masterfrom
kidroca:kidroca/feat/image-loader-headers
Closed

Image: support ImageSource with headers#8
kidroca wants to merge 14 commits intoExpensify:masterfrom
kidroca:kidroca/feat/image-loader-headers

Conversation

@kidroca
Copy link
Copy Markdown

@kidroca kidroca commented Nov 17, 2022

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 the ImageSource
is just an uri with no headers

When headers are involved we use the fetch API to load the image

Why are there 2 ways to load images?
Because fetch or xhr does not work for

  • loading progressive JPEG images
  • loading crossorigin blobs

Cross origin image requests can still be made with headers (fetch) if the server is configured correctly

Fixed Issues

$ Expensify/App#12603

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")

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants