изображение показывается пустым в одаренном чате RN - PullRequest
Новая
       31

изображение показывается пустым в одаренном чате RN

0 голосов
/ 29 июня 2019

В моем приложении для чата используются RN 0,59,9 и react-native-gifted-chat (0,9,6).Объект данных сообщения выглядит следующим образом: 

let r = {
          _id: msg.id,
          text: msg.data.msg_body,
          image: msg.data.image,
          video: msg.data.video,
          createdAt : msg.createdAt,
          user: {
            _id: msg.sender_id,
            name: msg.user_name,
            avatar: msg.user_avatar,
          }
        };

Среди text, image and video есть только одно поле, заполненное данными, а остальные 2 равны нулю или не определены для каждого сообщения.Вот пример данных сообщения в db:

enter image description here

Вот последние два вывода изображения изображения: 

06-29 15:10:21.732 14652 14927 I ReactNativeJS: 'Messages : ', [ { _id: 131,
06-29 15:10:21.732 14652 14927 I ReactNativeJS:     text: undefined,
06-29 15:10:21.732 14652 14927 I ReactNativeJS:     image: './20160906_114858_HDR.jpg',
06-29 15:10:21.732 14652 14927 I ReactNativeJS:     video: undefined,
06-29 15:10:21.732 14652 14927 I ReactNativeJS:     createdAt: '2019-06-16T04:29:04.902Z',
06-29 15:10:21.732 14652 14927 I ReactNativeJS:     user: { _id: 22, name: 'jc', avatar: undefined } },
06-29 15:10:21.732 14652 14927 I ReactNativeJS:   { _id: 130,
06-29 15:10:21.732 14652 14927 I ReactNativeJS:     text: '',
06-29 15:10:21.732 14652 14927 I ReactNativeJS:     image: 'https://www.pexels.com/photo/nature-red-love-romantic-67636/',
06-29 15:10:21.732 14652 14927 I ReactNativeJS:     video: undefined,
06-29 15:10:21.732 14652 14927 I ReactNativeJS:     createdAt: '2019-06-16T04:23:36.663Z',
06-29 15:10:21.732 14652 14927 I ReactNativeJS:     user: { _id: 22, name: 'jc', avatar: undefined } },

Oneизображение указывает на URL, а другой является локальным файлом.Но оба изображения не отображаются:

enter image description here

Код рендеринга прост: 

render() {
      return (
          <GiftedChat 
            messages={this.state.messages}
            onSend={messages => this._onSend(messages)}
            //renderMessageImage={() => this.showImage}
            user={{_id: this.props.navigation.state.params.user.id,
                   name: this.props.navigation.state.params.user.name,
                   avatar: this.props.navigation.state.params.user.user_data.avatar}}
          /> 
      );
    }

Ссылка на URL изображения протестирована изагрузка и локальный файл представляет собой изображение 3 МБ.Что может вызвать неявку с изображением?

1 Ответ

1 голос
/ 04 июля 2019

Похоже, что URL удаленного изображения, который вы пытаетесь загрузить, указывает на веб-страницу, а не на фактическое изображение.

URL-адрес изображения должен быть:

https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940

И объект сообщения будет выглядеть следующим образом: 

{
  _id: 130,
  text: '',
  image: 'https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
  video: undefined,
  createdAt: '2019-06-16T04:23:36.663Z',
  user: { 
    _id: 22,
    name: 'jc',
    avatar: undefined
  }
}

Что касается другого (локального) изображения, убедитесь, что оно находится в том же каталоге, что и ваш файл .js (содержащий метод render, поскольку выиспользуют относительный путь "./").

...