Question

我的聊天应用程序使用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个字段为null或未定义。这是db中消息数据的示例：

这是最后2条图像消息输出：

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

一个图像指向一个URL，另一个图像指向一个本地文件。但两个图像均未显示：

渲染代码很简单：

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链接已测试并正在加载，本地文件为3MB图像。什么会导致图像不显示？

Answer 1

您似乎要加载的远程图像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文件位于同一目录中（包含渲染方法，因为您使用的是“ ./”相对路径）。

该图片在RN资优聊天中显示为空白

1 个答案: