SDKsReact Native

Create image message from URL

Construct an image message using pre-uploaded remote image metadata and URLs using the OpenIM React Native SDK.

Construct an image message using remote URLs and dimensions from pre-uploaded image assets:

The original image, high-resolution preview, and thumbnail can share the same descriptor object or use separate URLs tailored for specific resolutions.

const picture = {
  uuid: 'image-001',
  type: 'image/jpeg',
  size: 120000,
  width: 1280,
  height: 720,
  url: 'https://www.example.com/picture.png',
};

const message = await OpenIMSDK.createImageMessageByURL({
  sourcePicture: picture,
  bigPicture: picture,
  snapshotPicture: picture,
  sourcePath: '',
});

Parameters

Parameter	Type	Required	Description
`sourcePicture`	`PicBaseInfo`	Yes	Original image resource metadata.
`bigPicture`	`PicBaseInfo`	Yes	High-resolution image resource metadata.
`snapshotPicture`	`PicBaseInfo`	Yes	Thumbnail image resource metadata.
`sourcePath`	`string`	Yes	Local file path; pass empty string `""` when using remote-only assets.

Each PicBaseInfo object contains uuid, type, size, width, height, and url, representing unique identifier, MIME type, file size in bytes, pixel dimensions, and remote HTTP URL respectively.

Return value

A resolved Promise returns the initialized MessageItem object with image details stored in pictureElem.

This method builds the message structure strictly in client memory; it does not dispatch messages to the server or trigger lifecycle events. After initialization, invoke Send uploaded media message to deliver it directly without re-uploading media files.

Was this page helpful?