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" />;
}

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 this place:

• dinou/asset-extensions.js

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