Dinou docs

🖼️ Assets & Media

Dinou allows direct import of media files into your components. The framework supports a wide range of image, video, and audio formats.

Supported Extensions

Category	Extensions
Images	.png, .jpg, .jpeg, .gif, .svg, .webp, .avif, .ico, .mjpeg, .mjpg
Video	.mp4, .webm, .ogg, .mov, .avi, .mkv
Audio	.mp3, .wav, .flac, .m4a, .aac

Custom Extensions

Need support for additional formats? You can eject Dinou and modify dinou/core/asset-extensions.js.

Usage Example

Import media files directly like any other module:

// src/components/Hero.tsx
"use client";
import logo from "./logo.png";
import heroVideo from "./hero-background.mp4";
import backgroundMusic from "./ambient.mp3";

export default function Hero() {
  return (
    <section className="relative">
      {/* Image */}
      <img 
        src={logo} 
        alt="Company Logo" 
        className="w-32 h-32"
      />
      
      {/* Video */}
      <video autoPlay muted loop className="absolute inset-0 w-full h-full object-cover">
        <source src={heroVideo} type="video/mp4" />
      </video>
      
      {/* Audio (with controls) */}
      <audio controls className="hidden">
        <source src={backgroundMusic} type="audio/mpeg" />
      </audio>
      
      <div className="relative z-10">
        <h1>Welcome to Dinou</h1>
      </div>
    </section>
  );
}

TypeScript Support

To avoid TypeScript errors when importing assets, create declaration files for each format you use.

// src/assets.d.ts (or similar declaration file)
declare module "*.png" {
  const value: string;
  export default value;
}

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

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

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

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

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

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

// Add declarations for other formats as needed...

Declaration Placement

Place these declarations in a .d.ts file inside your src directory. Make sure the file is included in your tsconfig.json.