在React Native中成功获取图像后渲染失败

Question

I'm attempting to render an image that is the result of a successful fetch.

It seems fairly simple and everything works, except the picture fails to render.

In my constructor:

constructor(props) {
        super(props);
        const deliveryManPic = Config.images.deliveryManPic;

        this.state = {
            callModal: false,
            beepModal: false,
            pictureForBackground: null,
            finished: deliveryManPic,
            secondPic: null,

        };
        this.batteryLevelIndicator = '';
        this.pictureUrl = 'someURL';
    }

In my ComponentWillMount:

componentWillMount() {
        const urlForPicture = this.pictureUrl;
        apiService.getPicture(urlForPicture, (res) => {
            if (res !== null) {
                // console.log('here is your response', res);
                this.setState({ pictureForBackground: res, });
            } else {
                loggingService.debug('theres been a problem');
            }
        });
    }

Finally, inside my render method:

<View style={styles.deliveryGuyView}>
                        <Image
                            resizeMode="cover"
                            style={styles.policeCarIcon}
                            defaultSource={{ uri: this.state.finished }}
                            source={{ uri: this.state.pictureForBackground }}
                            onLoadEnd={() => {
                                console.log('pic has finished loading');
                            }}
                        />
                    </View> 

I don't see any yellow messages or errors in the console.log, but I don't see the picture that was successfully fetched. What could be the reason the picture fails to render?

Answer 1

我忘了在PoliceCarIcon样式对象内添加高度和宽度。