lukonik/oh-image

The missing Image Component for Vite and React

Summary

Oh Image is a React Image component that pairs with a Vite plugin to process images at build time. According to the repository, it provides a unified way to import and render images in Vite and React applications using a custom import suffix.

What it is useful for

This component targets engineers who use Vite as their bundler and need consistent image handling in React projects. Instead of wiring up separate image optimization pipelines, teams can rely on a single component that integrates with Vite's import system. The README confirms it uses the sharp image processing library, which suggests transformations happen at build time rather than at runtime in the browser. It is specific to Vite and React, so projects on other bundlers (such as webpack or Next.js) would not directly benefit. The README does not detail which image formats are supported or what specific transformations the plugin applies, so engineers should consult the project documentation for those details.

How engineers can use it

The README documents the following setup. First, install the package and its peer dependency sharp:

npm install @lonik/oh-image sharp --save

Second, register the Vite plugin by adding ohImage() to the plugins array in vite.config.ts:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { ohImage } from "@lonik/oh-image/plugin";

export default defineConfig({
  plugins: [react(), ohImage()],
});

Then import images with the ?$oh suffix and render them using the provided component:

import { Image } from "@lonik/oh-image/react";
import heroImg from "./hero.jpg?$oh";

function App() {
  return <Image src={heroImg} alt="Hero" />;
}

The README does not show configuration options for the component (such as width, height, or loading behavior) or for the plugin itself, nor does it explain which sharp operations are applied to imported images. The component is published under the MIT license, though the README does not detail warranty or contribution terms. For full configuration details and component props, the README directs readers to a separate documentation site.