时间戳

首页 > 解决方案 > 图片在 RN 天才聊天中显示为空白

react-native - 图片在 RN 天才聊天中显示为空白

问题描述

我的聊天应用程序使用 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 中消息数据的示例：

在此处输入图像描述

这是最后 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图片。什么可能导致图像未显示？

标签： react-nativereact-native-gifted-chat

解决方案

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

推荐阅读