Skip to main content

Image

Display images and textures in your UI.

Import​

import { Image } from '@bedrock-core/ui';

Usage​

<Image 
  x={10} 
  y={10}
  width={64}
  height={64}
  texture="textures/ui/my_icon"
/>

Props​

Component-Specific Props​

texture​

  • Type: string
  • Required: Yes
  • Description: Path to the texture in your Resource Pack (without file extension)

Control Props​

Image inherits all standard control props.

Examples​

Basic Image​

<Image 
  x={0} 
  y={0}
  width={100}
  height={100}
  texture="textures/ui/my_image"
/>
function ImageGallery() {
  const images = [
    'textures/items/diamond',
    'textures/items/gold_ingot',
    'textures/items/iron_ingot',
    'textures/items/emerald'
  ];
  
  return (
    <Panel width={300} height={100}>
      {images.map((texture, index) => (
        <Image
          key={index}
          x={10 + (index * 70)}
          y={10}
          width={64}
          height={64}
          texture={texture}
        />
      ))}
    </Panel>
  );
}

Clickable Image Button​

function ImageButton() {
  return (
    <Button
      x={10}
      y={10}
      width={64}
      height={64}
      onPress={() => console.log('Image clicked')}
    >
      <Image
        x={0}
        y={0}
        width={64}
        height={64}
        texture="textures/ui/icon"
      />
    </Button>
  );
}

Texture Path Format​

Texture paths should:

  • Be relative to your Resource Pack root
  • Omit file extensions (.png, .jpg)
  • Use forward slashes (/) as path separators
  • Match exactly the path structure in your Resource Pack

Example Resource Pack structure:

packs/RP/
└── textures/
    └── ui/
        ├── icons/
        │   ├── health.png
        │   └── mana.png
        └── backgrounds/
            └── panel_bg.png

Usage:

<Image texture="textures/ui/icons/health" />
<Image texture="textures/ui/backgrounds/panel_bg" />

Best Practices​

  • Prefer nine-sliced textures for scaling textures
  • Keep texture file sizes small to reduce pack size
  • Organize textures in logical folders within textures/ui/
  • Match texture dimensions to your UI layout for crisp rendering

Limitations​

  • Animated textures (flipbook) not yet supported (not event tested)
  • Maximum texture length determined by serialization protocol (80 bytes)