RemoteImage

@coinbase/cds-web@8.13.6

A React component for displaying different types of images, including network images, static resources, temporary local images, and images from local disk, such as the camera roll.

Import

import { RemoteImage } from '@coinbase/cds-web/media/RemoteImage'

SourceView source codeStorybookView StorybookFigmaView Figma

---

Related components

• Avatar,
• Icon,
• SpotIcon,
• CellMedia

Border Color

Adjust the borderColor of RemoteImages

Loading...

󰙡

Live Code

<RemoteImage source={assets.eth.imageUrl} shape="circle" size="xxxl" borderColor="secondary" />

size

Adjust size of RemoteImage using AvatarSizes

Loading...

󰙡

Live Code

<HStack gap={1}>
  <RemoteImage source={assets.ada.imageUrl} size="m" shape="circle" />
  <RemoteImage source={assets.eth.imageUrl} size="l" shape="circle" />
  <RemoteImage source={assets.ltc.imageUrl} size="xl" shape="circle" />
  <RemoteImage source={assets.sushi.imageUrl} size="xxl" shape="circle" />
  <RemoteImage source={assets.uni.imageUrl} size="xxxl" shape="circle" />
</HStack>

Shape

Loading...

󰙡

Live Code

<VStack gap={2}>
  <RemoteImage source={assets.ada.imageUrl} size="xxxl" shape="circle" />
  <RemoteImage source={squareAssets.human1} size="xxxl" shape="squircle" />
  <RemoteImage source={squareAssets.human2} size="xxxl" shape="square" />
  <RemoteImage source={squareAssets.human3} width={40} height={60} shape="rectangle" />
</VStack>

Default fallback

If no images are shown, RemoteImage will show a default Fallback. Be aware that a rectangular fallback will truncate content from the fallback to fit the rectangle.

Loading...

󰙡

Live Code

<VStack gap={2}>
  <RemoteImage size="m" shape="squircle" />
  <RemoteImage size="l" shape="circle" />
  <RemoteImage size="xl" shape="square" />
  <RemoteImage width={50} height={80} shape="rectangle" />
</VStack>