Using Image with https

Question

When I run this code (very similar to the code here https://facebook.github.io/react-native/docs/image.html) using the command react-native run-ios the image head_logo.png image does not appear. How can I display this image?

import React, { Component } from 'react';
import { AppRegistry, View, Image } from 'react-native';

export default class DisplayAnImage extends Component {
  render() {
    return (
      <View>
        <Image
          style={{width: 50, height: 50}}
          source={{uri: 'https://facebook.github.io/react-native/img/header_logo.png'}}
        />
        <Image
          style={{width: 66, height: 58}}
          source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('DisplayAnImage', () => DisplayAnImage);

Jigar · Accepted Answer · 2017-12-01 06:40:57Z

2

This is because you are using white image and your background is white

simply apply backgroundColor:'#000' to <View>

answered Dec 1, 2017 at 6:40

Jigar

1,3749 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

WilomGfx · Accepted Answer · 2017-12-01 01:52:41Z

0

It does appear, its just white and has transparent background. Try adding a red background to your root <View>

See here in this snack, it works like a charm

https://snack.expo.io/By6iSVCeM

answered Dec 1, 2017 at 1:52

WilomGfx

2,0221 gold badge20 silver badges28 bronze badges

Comments

JAINESH DOSHI · Accepted Answer · 2017-12-01 05:11:41Z

0

Your Image is appear but Image colour same as your background colour. So it is not showing properly in the view.

So you can give background colour to image or View. So it can be showing properly.

<Image
          style={{width: 50, height: 50, backgroundColor: 'grey', resizeMode: 'center'}}
          source={{uri: 'https://facebook.github.io/react-native/img/header_logo.png'}}
/>

answered Dec 1, 2017 at 5:11

JAINESH DOSHI

2682 silver badges13 bronze badges

Collectives™ on Stack Overflow

Using Image with https

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related