---

title: Image sourcecode: src/core/Image.tsx

<Grid cols={4}> <li> <Codesandbox id="9s2wd9" /> </li> <li> <Codesandbox id="l4klb" /> </li> <li> <Codesandbox id="gsm1y" /> </li> <li> <Codesandbox id="x8gvs" /> </li> <li> <Codesandbox id="yjhzv" /> </li> </Grid>

A shader-based image component with auto-cover (similar to css/background: cover).

export type ImageProps = Omit<ThreeElements['mesh'], 'scale'> & {
  segments?: number
  scale?: number | [number, number]
  color?: Color
  zoom?: number
  radius?: number
  grayscale?: number
  toneMapped?: boolean
  transparent?: boolean
  opacity?: number
  side?: THREE.Side
}

function Foo() {
  const ref = useRef()
  useFrame(() => {
    ref.current.material.radius = ... // between 0 and 1
    ref.current.material.zoom = ... // 1 and higher
    ref.current.material.grayscale = ... // between 0 and 1
    ref.current.material.color.set(...) // mix-in color
  })
  return <Image ref={ref} url="/file.jpg" />
}

To make the material transparent:

<Image url="/file.jpg" transparent opacity={0.5} />

You can have custom planes, for instance a rounded-corner plane.

import { extend } from '@react-three/fiber'
import { Image } from '@react-three/drei'
import { easing, geometry } from 'maath'

extend({ RoundedPlaneGeometry: geometry.RoundedPlaneGeometry })

<Image url="/file.jpg">
  <roundedPlaneGeometry args={[1, 2, 0.15]} />
</Image>