Val

Images Guide

Working with Images

Images in Val

Val provides a type-safe way to handle images with built-in support for local and remote images. Images are optimized and integrated with Next.js Image component.

Defining Image Schema

Use `s.image()` to define an image field in your schema:

const pageSchema = s.object({
  hero: s.image(),
  thumbnail: s.image().nullable(),
  logo: s.image(),
});

Using Local Images

Local images are stored in the `/public/val` folder. Use `c.image()` to reference them:

export default c.define("/content/page.val.ts", pageSchema, {
  hero: c.image("/public/val/hero.jpg", {
    width: 1200,
    height: 800,
    alt: "Hero image",
  }),
  thumbnail: c.image("/public/val/thumb.png", {
    width: 400,
    height: 300,
    alt: "Thumbnail",
  }),
  logo: c.image("/public/val/logo.svg", {
    width: 200,
    height: 100,
    alt: "Company logo",
  }),
});

Using Remote Images

Enable remote images by adding `.remote()` to your schema. Then use `c.remote()` to reference external URLs:

const pageSchema = s.object({
  externalImage: s.image().remote(),
});

export default c.define("/content/page.val.ts", pageSchema, {
  externalImage: c.remote(
    "https://example.com/image.jpg",
    {
      width: 1200,
      height: 800,
      mimeType: "image/jpeg",
      alt: "External image",
    }
  ),
});

Rendering Images

Use the `ValImage` component to render images in your React components:

import { ValImage } from "@valbuild/next/client";
import { fetchVal } from "@/val/val.rsc";
import pageVal from "./page.val";

export default async function Page() {
  const { hero, thumbnail } = await fetchVal(pageVal);
  
  return (
    <div>
      <ValImage 
        src={hero} 
        priority 
        className="w-full h-auto"
      />
      {thumbnail && (
        <ValImage 
          src={thumbnail}
          className="w-32 h-32 object-cover"
        />
      )}
    </div>
  );
}

Image Properties

When defining images, you must provide:

width: The intrinsic width of the image
height: The intrinsic height of the image
alt: Alt text for accessibility
mimeType: (Remote images only) The MIME type

Important

Local images must be stored in the `/public/val` directory. Val Studio will automatically upload images to this location when you add them through the editor.

Table of Contents