Image: support HTTP properties for 'source' objects

[necolas]

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]

Below is some detail on additional functionality this would fix (from https://github.com/necolas/react-native-web/issues/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

• https://codesandbox.io/s/88lj20kw02
• https://snack.expo.io/@brunolemos/react-native-image-http-redirect

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]

Hey guys, any update on this one?

[BenMoveo]

Did someone mange to overcome this issue?

[kidroca]

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

• https://github.com/necolas/react-native-web/pull/2442