Question

我有一个反应性项目。

当我要放置用户个人资料图片时，我会发送这样的API请求

userImageGet(imdl_id) {
API.postValue('/api/UserImage/?imdl_id='+imdl_id,null)      
    .then((r) => {
      console.log(r.data); // 
      this.setState({userImagebs64:r.data}); // here's user base64 string
    })
}

那样（我粉碎了图像以获得特殊信息，但可以在Web浏览器上使用），它太长了

data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIy

我有一个userRenderImage函数

userRenderImage() {
    let userImage = null;
    if (this.state.userImagebs64) {
      // here I got base64 format
      userImage = (
        <Image
           style={styles.userImage}
          source={{ uri: this.state.userImagebs64}}
        />
      );
    }
    return userImage;
}

图片样式

userImage: {
    width: 100,
    height: 100,
    borderRadius: Platform.OS === 'ios' ? 40 : 50,
    padding: 5
}

它是render方法，但是我看不到任何建议，

Answer 1

像魅力一样为我工作

<Image style={styles.imgstyle} source={{uri: "data:image/png;base64,"+this.state.upic}} />

Answer 2

如果t是有效字符串，则在此处生成base64字符串chk。 https://www.base64decode.net/base64-image-decoder。

第二次将基数64传递为帖子正文参数，而不是URL参数。

再次检查api的响应，如果它再次返回有效的base64字符串，则可以使用上面共享的网络链接将其解码为图像。

如果所有这些都可行，那么在代码中看起来没问题，就可以在应用中呈现它。

Answer 3

对我有用。

我在代码行顶部定义一个新变量

let UserImage = "";

然后在API响应中，我这样更改UserImage的值。

userImageGet(imdl_id) {
API.postValue('/api/UserImage/?imdl_id='+imdl_id,null)      
.then((r) => {
  console.log(r.data); // 
  UserImage = r.data;
  this.setState({userImagebs64:r.data}); // here's user base64 string
})

}

我使用<Image>

 <Image
      style={{width: 50, height: 50}}
      source={{uri: UserImage}}
    />

Answer 4

这是我的示例。我知道它来晚了，但可能对其他人有帮助

 <Image
                                style={{
                                    width: 51,
                                    height: 51,
                                    resizeMode: 'contain'
                                }}
                                source={{uri: "data:image/png;base64,"+this.state.yourImageLink}}
                            />

在源代码中，您必须写uri: "data:image/png;base64

Base64图像未显示本机

4 个答案: