Base64 изображение не показывает реагировать родной

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
    })
}

вот так (я раздавил изображение для особой информации, но оно работает в веб-браузере) это слишком долго

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
}

это метод рендеринга, но я ничего не вижу, любые советы приветствуются

Answer 1

Это сработало для меня.

Я определяю новую переменную, мои строки кода в верхней части выглядят так:

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 2

С помощью строки base64, сгенерированной здесь chk, если t является допустимой строкой. https://www.base64decode.net/base64-image-decoder.

Затем передайте base 64 в качестве параметра тела сообщения вместо параметров URL.

В-третьих, проверьте ответ API, если он снова возвращает действительную строку base64, которую можно декодировать в изображение с помощью веб-ссылки, указанной выше.

Если все это работает, не должно быть проблем с отображением в приложении, так как код вроде бы в порядке.