Image

<c.img src="https://..." alt="A warm sunrise over a snowy mountain." />

The <c.img> component embeds an image into the screen.

Configuration

By default, we will render an <img> element on the web and an <Image> component on native. If you're using a framework like Next.js (opens in a new tab) or Expo Image (opens in a new tab), you can substitute the default-rendered element by passing it to CarnationProvider:

apps/web/pages/_app.tsx

import Image from "next/image";
import { CarnationConfig, CarnationProvider } from "carnation-ds";
 
export default function App({ Component, pageProps }: AppProps) {
  const config: CarnationConfig = {
    image: {
      component: Image,
    },
  };
 
  return (
    <CarnationProvider config={config}>
      <Component {...pageProps} />
    </CarnationProvider>
  );
}

API Reference

Prop	Type	Default	Description
`src`	`string`	—	The image URL.
`alt`	`string`	—	Alternative text for accessibility.

Text Link