Getting image from chat not displaying in react native

Sendbird Chat API/SDK JavaScript
1

return {
_id: sbMessage.messageId,
text: sbMessage.message,
user: {
_id: sbMessage._sender?.userId,
name: sbMessage._sender?.nickname,
avatar: sbMessage._sender?.profileUrl,
},
createdAt: new Date(sbMessage.createdAt),
image: sbMessage.plainUrl,
};

1 Like
2

Hi @Jayachandran_Thillai,

Welcome to the Sendbird Community. Can you help me better understand the problem you’re experiencing. You’re attempting to display the image that is contained in a message in the channel, but it is not working? It looks like you’re using the plainUrl, which does not include the necessary token to authenticate the image. In the Javascript SDK, you should be using just the url value.

image
image1647×594 83.4 KB

3

hi @Tyler , but url attribute is missing in my received message

4

Hi @Jayachandran_Thillai,

Can you provide me with what you get back when you console your message list out?

Thanks!

5 
 "_sender": {
    "_preferredLanguages": null,
    "connectionStatus": "nonavailable",
    "friendDiscoveryKey": null,
    "friendName": null,
    "isActive": true,
    "isBlockedByMe": false,
    "lastSeenAt": 0,
    "metaData": {
      "first_name": "Jayachandran",
      "last_name": "Thillaivillalan",
    },
    "nickname": "Jayachandran",
    "plainProfileUrl": "",
    "requireAuth": false,
    "role": "none",
    "userId": "9df15260-0ddf-4ba1-a360-884b8*******"
  },
  "appleCriticalAlertOptions": null,
  "channelType": "group",
  "channelUrl": "602a7928-2ddc-4503-993b-************",
  "createdAt": 1622570411002,
  "customType": "",
  "data": "",
  "errorCode": 0,
  "isOperatorMessage": false,
  "mentionType": "users",
  "mentionedUsers": [],
  "messageId": 6737436443,
  "messageSurvivalSeconds": -1,
  "messageType": "file",
  "metaArrays": [],
  "name": "Simulator Screen Shot - iPhone 11 - 2021-06-01 at 01.30.55.png",
  "ogMetaData": null,
  "parentMessageId": 0,
  "parentMessageText": null,
  "plainUrl": "https://file-us-3.sendbird.com/9b163baf81064a90b185e7c3eb9f189d.png",
  "reactions": [ ],
  "reqId": "",
  "requestState": "succeeded",
  "requestedMentionUserIds": [],
  "requireAuth": true,
  "sendingStatus": "succeeded",
  "silent": false,
  "size": 97714,
  "threadInfo": {
    "lastRepliedAt": 0,
    "mostRepliedUsers": [],
    "replyCount": 0,
    "updatedAt": 0
  },
  "thumbnails": [],
  "type": "image/png",
  "updatedAt": 0
}
6

You should still definitely have a URL variable, even if you can’t see it directly. Can you try to console it out and see if it returns an error?

Alternatively, you could build the authorized URL yourself. The Sendbird singleton has an ekey value that you could attach to the image URL to get the authorized url. Please note that this ekey value is specific to each user.

So for example, you could do something like this:

const sb = SendBird.getInstance();
const image = sbMessage.plainUrl + '?auth=' + sb.ekey
1 Like