Img

a component that renders an image with a fallback if the image fails to load.

PreviewCode

Open in

Image failed to load

Image loaded successfully

Installation

npx shadcn@latest add https://mhl5.vercel.app/r/Img.json

eslint

You can use the following eslint rule to prevent the use of next/image

{
  "rules": {
    "no-restricted-imports": [
      "error",
      {
        "name": "next/image",
        "message": "Please import from `@/components/ui/Img` instead.",
        "importNames": ["default"]
      }
    ]
  }
}

Usage

import Img from "@/components/ui/Img";

<Img
  src="/some-url.png"
  alt="test"
  width={200}
  height={200}
  className="rounded-sm border"
/>