CODEWITHSUNDEEP
react-nativereact-native-gifted-chat
user938363
user938363

Reputation: 10360

image shown blank in RN gifted chat

My chat app uses RN 0.59.9 and react-native-gifted-chat(0.9.6). The message data object is like this:

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

Among text, image and video, there is only one field filled in with data and other 2 is either null or undefined for each message. Here is an example of message data in db:

enter image description here

Here is the last 2 image message output:

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 image is pointing to a URL and another one is a local file. But both image are not showing:

enter image description here

The render code is simple:

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

The image URL link is tested and loading and the local file is a image of 3MB. What could cause no-show with the image?

Upvotes: 0

Views: 2930

Answers (1)

Bob T
Bob T

Reputation: 318

It looks like remote image URL you are trying to load is pointing to a web page and not the actual image.

The image url should be:

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

And the message object would look like:

{
  _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
  }
}

As for the other (local) image, make sure it is in the same directory as your .js file (containing the render method, since you are using a './' relative path).

Upvotes: 1

Related Questions