React-native-web: Image: support HTTP properties for 'source' objects

Created on 7 Jul 2018 · 2Comments · Source: necolas/react-native-web

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

help

Source

necolas

👍2

Most helpful comment

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

necolas on 9 Sep 2018

👍3

All 2 comments

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 }} />;