dinou docs

Overview

dinou is ready to support the use of images in your components. Supported formats include .png, .jpeg, .jpg, .gif, .svg, and .webp.

Important: Only images imported under "use client" directive will be detected by Webpack and generated in webpack folder.

With Client Components

Just import the image and use it:

// src/component.tsx
"use client";

import image from "./image.png"; // import the image from where it is located (inside src folder)

export default function Component() {
  return <img src={image} alt="image" />;
}

With Server Components

If you use server components, then you must create an additional file (e.g. images.ts) with the "use client" directive and import there the images too:

Images Import File

// src/images.ts
"use client";

import "./image.png";

Server Component

// src/component.tsx
import image from "./image.png"; // import the image from where it is located (inside src folder)

export default async function Component() {
  return <img src={image} alt="image" />;
}