react-native 0.31.0 image not loaded or displayed

[nilaybrahmbhatt]

i am started using react-native 0.31.0.

my code is

onLoadStart(e){
    console.log('LOAD START');
  }
  onLoadProgress(e){
    var progress = Math.round(100*e.nativeEvent.written / e.nativeEvent.total);
    if (progress < _oldProgress){
      console.log('FAIL');
    }
    _oldProgress = progress;
    console.log('LOAD PROGRESS: '+progress);
  }
  onLoaded(e){
    console.log('LOAD ENDED');
  }



    render() {
    return (
<Image
          source={{uri:'http://mobinteg.com/wp-content/uploads/2015/03/news_img.png'}}
          resizeMode='cover'
          onLoadProgress={this.onLoadProgress}
          onLoadStart={this.onLoadStart}
          onLoadEnd={this.onLoaded}
          style={{height:200,width:200,flex:1}}>
        </Image> );
}

function load start and load end works and print the log but still image is not displayed on screen

[AgtLucas]

@nilaybrahmbhatt iOS? From iOS 8 and newer versions, by default all external require/connections should be over HTTPS.

[nilaybrahmbhatt]

@AgtLucas i tried https://mobinteg.com/wp-content/uploads/2015/03/news_img.png also but not working
and i am tried http://image.delfoo.com/data/background/food-pizza.jpg this worked perfectly but not all image working...

[Maxwell2022]

• It needs to be served over HTTPS
• It needs to have a valid SSL certificate
• <Image ... /> needs to have a width and height define in style property

If you follow this it should work.

[joint-song]

@Maxwell2022 I'm sure all my code/project settings is fine, but some images can not be load successfully.
I answered my related information here https://github.com/facebook/react-native/issues/289#issuecomment-257241271

[Maxwell2022]

can you give the url of the image that is not loading?

[joint-song]

@Maxwell2022 one of these: https://cdn.applysquare.net/storage/tmp/qa/thread/DmMz5AkpU.jpg

[Maxwell2022]

Using [email protected], [email protected], xcode 8.1 and iPhone 6 simulator running iOS 10.1

return (
    <View style={{ flex: 1, flexDirection: 'column', backgroundColor: 'transparent' }}>
        <Image style={{ width: 150, height: 150 }} source={{uri: 'https://cdn.applysquare.net/storage/tmp/qa/thread/DmMz5AkpU.jpg'}} />
    </View>
)

This is working for me, it's loading the image as expected:

[joint-song]

@Maxwell2022 Yes, I am sorry that may not stated clearly. It all works well on simulator. This bad situation just appeares on real device lower than iPhone 5(as I test out).

[bigdrum]

This image is kind of interesting, its URL has suffix of ".jpg" but it actually is a png file (the server response header returns the correct png content type). Could this potentially cause some problems for the image loader (i.e. imageURLLoaderForURL)?

[joint-song]

@bigdrum I checked all images not loaded successfully but in jpg extension. As you said, all these images are png mime type actually.

[hramos]

Closing this issue because it has been inactive for a while. If you think it should still be opened let us know why.