Question

我正在尝试加载远程占位符图像。第一个图像是本地图像，可以正确加载，但第二个图像则不能。我正在android设备上对此进行测试，因此我认为https不会引起问题。

有什么暗示我可能做错了吗？

import React, { Component } from 'react';
import { Text, View, Dimensions, TouchableOpacity, Image, ToastAndroid, Animated } from 'react-native';
import styles from "./styles";

class Story extends Component {
    constructor(props){
        super(props);
        this.state={};
    }
    render() {
        return (
            <View style={{position:'relative'}}>
                <Image source={require('app/assets/images/campus.png')} style={styles.container}></Image>
                <Image source={{ uri: 'https://place-hold.it/100x200/fdd.png' }} style={styles.character1}></Image>
            </View>
        );
    }
}
export default Story;

Answer 1

// 首先设置 isImageload false

然后实现像这样的图像

var image= this.state.isImageload ? require('place holder image') : {uri: ImageUrl};

return(
  <Image
    source={immage}
    onLoadStart={() => this.setState({isImageload : true})}  
    onLoad={() => this.setState({isImageload : false})}
  />
)

Answer 2

我从Image标签中删除了一对支架，代码变成：

<Image source={ uri: 'https://place-hold.it/100x200/fdd.png' } style={styles.character1}></Image>

请尝试一下是否可行。

无法在react-native中加载远程占位符图像

2 个答案: