Oh Imagedocs

oh-image is written in TypeScript, so you get full type safety and autocomplete for every public API. However, to enable IntelliSense for the Vite optimizer's ?$oh import syntax, you must tell TypeScript about the @lonik/oh-image/client definitions.

Add the client package to tsconfig.json

Open tsconfig.json and include the client definitions so the compiler can resolve them:

{
  ...
  "include": ["src", "@lonik/oh-image/client"]
}

Next, choose one of the following approaches for injecting the types.

Option 1: Add to the types array

{
  "compilerOptions": {
    ...
    "types": ["@lonik/oh-image/client", "vite/client"]
    ...
  },
  "include": ["src", "@lonik/oh-image/client"]
}

Make sure vite/client appears after @lonik/oh-image/client

Option 2: Reference from vite-env.d.ts

/// <reference types="@lonik/oh-image/client" />
/// <reference types="vite/client" />

Same order here

After making changes,it might need to restart the TypeScript server (in VS Code use Cmd + Shift + P → TypeScript: Restart TS server).

Showcase

Once configured, the optimizer imports expose proper types and autocompletion:

import CarImage from "./assets/car.jpg?$oh";

function App() {
  return <CarImage />; // full IntelliSense
}

Important Caveat

To ensure the client definitions match Vite imports, declare modules using the following pattern: declare module "*$oh". This matches any import ending in $oh, which is crucial if you pass additional query parameters to customize the optimization:

import CarImage from "./assets/car.jpg?blur=50&$oh";

For the declaration to work, the $oh suffix must remain at the end of the import path. We would love to match $oh anywhere in the string, but module declarations currently support only a single wildcard, so this is the most flexible pattern available.

PREVIOUSInstallation
NEXTImage