Assets or Media Files

Overview

dinou supports the use of media files in your components. Supported file extensions are:.png, .jpeg, .jpg, .gif, .svg, .webp, .avif, .ico, .mp4, .webm, .ogg, .mov, .avi, .mkv, .mp3, .wav, .flac, .m4a, .aac, .mjpeg, .mjpg.

Usage

Just import the asset as a default import and use it in your component:

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

import image from "./image.png";

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

With Server Components

If you're using server components, you need to create a separate client file (e.g. assets.ts) to trigger dinou's detection:

Client Asset File

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

import "./image.png";

Server Component

// src/component.tsx
import image from "./image.png";

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

TypeScript Declaration

You should declare each supported file extension in a declaration file (e.g. src/assets.d.ts):

// src/assets.d.ts
declare module "*.jpeg" {
  const value: string;
  export default value;
}

declare module "*.jpg" {
  const value: string;
  export default value;
}

declare module "*.png" {
  const value: string;
  export default value;
}

// continue with the rest...

Custom Extensions

If you need to support a new file extension, you can eject and customize dinou. Add the extension in these three places:

• rollup.config.js
• dinou/server.js
• dinou/render-html.js

Just search for the existing file extensions and append your own.