javascript - 将图像作为 Prop 传递时无法加载图像

Question

我尝试创建一个接受图像 uri 作为属性的自定义组件。当调用这个组件时，我想传递不同的uri给这个组件，以便它显示不同的图像。

当我这样做时，我没有收到任何错误，但图像没有加载(它只是那里的空白区域)。

我尝试将 URI 直接传递到组件中，并且图像可以正确加载。但是，当我返回将 uri 作为 prop 传递时，图像根本无法加载

export default class CustomComponent extends Component {
    constructor(props){
        super(props);
}
render(){
    return(
        <View>
            <ImageBackground source = {{uri: this.props.imageSource}} style = {{width:100, height:100}}/>
        <View>

    );
}

export default class App extends Component {
    render(){
        return(
            <CustomComponent imageSource ='https://vignette.wikia.nocookie.net/moderncombatgames/images/0/0d/Chicken_Rice.png/revision/latest?cb=20151231093652'/>
);
}

我期望图像能够加载，但它没有。

Answer 1

我刚刚尝试了您的代码，它似乎可以工作。

我将您的 CustomComponent 放入其自己的文件 CustomComponent.js 中，并将其导入到 App.js 中。

这是一份代码工作的小吃 https://snack.expo.io/SJgTkxbQ4