SmartImg 🧠🖼️

A smart React <img /> component with graceful fallback UI on error.

Install

npm install smart-img

Usage

import SmartImg from "smart-img";

function App() {
  return (
    <div style={{ width: "300px" }}>
      <SmartImg
        src="https://example.com/non-existent-image.jpg"
        alt="Profile picture"
        onError={
          <div style={{ textAlign: "center", padding: "1rem", border: "1px solid #ccc" }}>
            <h2>Image failed to load</h2>
            <p>Check your connection or try later.</p>
          </div>
        }
        style={{
          width: "100%",
          height: "200px",
          objectFit: "cover",
          borderRadius: "8px"
        }}
      />
    </div>
  );
}