Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Image: support HTTP properties for 'source' objects #1019

Open
necolas opened this issue Jul 7, 2018 · 4 comments · May be fixed by #2442
Open

Image: support HTTP properties for 'source' objects #1019

necolas opened this issue Jul 7, 2018 · 4 comments · May be fixed by #2442
Labels
has: pr Subject of a pull request needs: help project:react-native-web Issue associated with react-native-web
Milestone

Comments

@necolas
Copy link
Owner

necolas commented Jul 7, 2018

Image can support HTTP-Verb, Headers or a Body along with the image request. The image loader may need to be implemented using XMLHttpRequest.

https://facebook.github.io/react-native/docs/images#network-requests-for-images

@necolas
Copy link
Owner Author

necolas commented Sep 9, 2018

Below is some detail on additional functionality this would fix (from #1080 by @brunolemos). I don't think it's possible using new Image() loading but should be straightforward with XMLHttpRequest loading:

xhr.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    src = xhr.responseURL;
  }
};

The problem

When using an Image URI that redirects to another one, the image is not rendered.

// does not work:
<Image source={{ uri: 'https://twitter.com/brunolemos/profile_image?size=original', width: 100, height: 100 }} />;

// works fine:
<Image source={{ uri: 'https://pbs.twimg.com/profile_images/1029249022903676928/GgKLxkT4.jpg', width: 100, height: 100 }} />;

How to reproduce

Expected behavior

HTTP redirect should also work on web since it works on mobile

Environment (include versions). Did this work in previous versions?

  • React Native for Web (version): 0.8.9
  • React (version): 16.4.2
  • Browser: Chrome 68

Screenshots

@pwiszowaty

This comment has been minimized.

@necolas necolas added this to the 0.18 milestone Jun 16, 2021
@necolas necolas added the project:react-native-web Issue associated with react-native-web label Jul 2, 2022
@BenMoveo
Copy link

Did someone mange to overcome this issue?

@kidroca
Copy link

kidroca commented Nov 25, 2022

Opened a PR to support image sources with headers (so far only GET method support) but I can open a follow PR to support POST and other methods

necolas pushed a commit that referenced this issue Apr 10, 2023
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 sources contain headers we make a fetch request and then render a
local url for the downloaded blob (URL.createObjectURL)

Fix #1019
Close #2442
@necolas necolas added the has: pr Subject of a pull request label Apr 10, 2023
necolas pushed a commit that referenced this issue Apr 10, 2023
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 sources contain headers we make a fetch request and then render a
local url for the downloaded blob (URL.createObjectURL)

Fix #1019
Fix #2268
Close #2442
necolas pushed a commit that referenced this issue Apr 12, 2023
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 sources contain headers we make a fetch request and then render a
local url for the downloaded blob (URL.createObjectURL)

Fix #1019
Fix #2268
Close #2442
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
has: pr Subject of a pull request needs: help project:react-native-web Issue associated with react-native-web
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants