时间戳

首页 > 解决方案 > API 调用未显示图像

reactjs - API 调用未显示图像

问题描述

我有屏幕 A 和屏幕 B。在屏幕 A 中，我有一个身份验证，它提供一个包含用户名、名称和头像的 API 响应。我可以使用此代码从屏幕 A 传递响应，并且它成功显示在屏幕 B 中：

.then ((res) => {   
    if(res.status == 200) {
        this.props.navigation.navigate('Home', {email: this.state.email, username: res.data.user.username, name: res.data.user.name, avatar: res.data.user.avatar })            
        alert("Success!")       
    }

在屏幕 B 上，我将状态存储为道具：

export default class MainScreen extends Component {

constructor(props) {
    super(props)
    this.state = {
        username: '', 
        email: '',
        name: '',
        avatar: '',
        User: this.props.navigation.state.params.username,
        Name: this.props.navigation.state.params.name,
        Avatar: this.props.navigation.state.params.avatar,
    }
}

要调用和显示状态（对于用户名和名称），我只需使用引用并显示。

<TextInput value={this.state.User} username={this.state.username} changeName={this.changeName} editable={false} selectTextOnFocus={false}/>

但是对于图像 URI，this.state.avatar 调用似乎不起作用。

<Image source = {{uri: this.state.Avatar}}/>

任何帮助将不胜感激。我是这个程序的新手。

标签： reactjsnative

解决方案

尝试将width和添加height到图像。另外，请确保uri具有绝对图像网址，http://www.demo.com/image.jpg而不是类似/image.jpg

推荐阅读