Skip to content
Lenso UI

Image

Image 从 HeroUI v2 到 v3 的迁移指南。

HeroUI v3 已移除 Image 组件。请改用原生 HTML img 元素或 Next.js 的 Image 组件，并结合 Tailwind CSS 类进行样式与效果处理。

主要变化

1. 组件移除

v2： @lenso/ui 的 <Image> 组件
v3： 原生 HTML img 元素，或 Next.js Image 组件

2. 能力对照

v2 的 Image 提供的能力，在 v3 中需要分别替换：

v2 能力v3 对应做法说明
radius propTailwind rounded-* 类如 rounded-sm、rounded-md、rounded-lg、rounded-full
shadow propTailwind shadow-* 类如 shadow-sm、shadow-md、shadow-lg
isBlurred prop手动实现模糊使用 CSS filter: blur() 或 Tailwind blur-*
isZoomed prop手动实现悬停缩放使用 Tailwind hover:scale-*
fallbackSrc prop手动错误回退使用 onError + 状态切换 src
disableSkeleton / 加载骨架图手动加载态使用 React state + 条件渲染
removeWrapper prop直接渲染无需额外 wrapper，直接渲染 img

结构变化

在 v2 中，Image 是对原生 img 的封装组件：

import { Image } from "@lenso/ui";
export default function App() {  return (    <Image      src="https://example.com/image.jpg"      alt="Example image"      width={300}      height={200}    />  );}

在 v3 中，直接使用原生 img，并用 Tailwind CSS 控制样式：

export default function App() {  return (    <img      src="https://example.com/image.jpg"      alt="Example image"      width={300}      height={200}      className="rounded-lg"    />  );}

迁移示例

使用 Next.js Image（推荐）

若使用 Next.js，推荐使用其优化的 Image 组件：

import { Image } from "@lenso/ui";
<Image  src="/image.jpg"  alt="Example"  width={300}  height={200}/>

悬停放大（对应 isZoomed）

<Image isZoomed src="..." alt="..." />

模糊效果（对应 isBlurred）

<Image isBlurred src="..." alt="..." />

回退图片（对应 fallbackSrc）

<Image  src="https://example.com/image.jpg"  fallbackSrc="/fallback.jpg"  alt="Example"/>

加载骨架（对应 skeleton）

<Image  src="https://example.com/image.jpg"  alt="Example"  disableSkeleton={false}/>

组合效果

<Image  src="https://example.com/image.jpg"  alt="Example"  radius="lg"  shadow="md"  isZoomed  isBlurred  width={400}  height={300}/>

创建可复用的图片组件（可选）

如果你经常在同类场景重复使用图片能力，可以封装一个可复用组件：

import { Image } from "@lenso/ui";
<Image  src="..."  radius="lg"  shadow="md"  isZoomed/>

完整示例

import { Image } from "@lenso/ui";
export default function App() {  return (    <div className="space-y-4">      <Image        src="https://example.com/image1.jpg"        alt="Image 1"        width={300}        height={200}        radius="lg"        shadow="md"      />      <Image        src="https://example.com/image2.jpg"        alt="Image 2"        width={300}        height={200}        isZoomed        radius="lg"      />      <Image        src="https://example.com/image3.jpg"        alt="Image 3"        width={300}        height={200}        isBlurred        radius="full"      />    </div>  );}

总结

  1. 组件已移除：v3 不再提供 Image 组件。
  2. 调整 import：移除 import { Image } from "@lenso/ui"。
  3. 使用原生标签：用原生 img，或 Next.js Image。
  4. 能力补齐：模糊、悬停放大、骨架屏与回退图需自行组合实现。
  5. 样式方式：圆角、阴影与视觉效果直接用 Tailwind CSS 类控制。

迁移步骤

  1. 移除 import：从 @lenso/ui 的 import 中删除 Image。
  2. 替换标签：把所有 <Image> 替换为 img（或 Next.js Image）。
  3. 补齐 Tailwind 类：用等价类表达圆角、阴影等视觉样式。
  4. 按需实现行为：如需模糊、放大、骨架屏、回退图，请自行实现。
  5. Next.js 项目：可优先使用 next/image 做图片优化。
  6. 可选：对常用模式封装可复用组件。

Next.js 的 Image 组件

在 Next.js 中，next/image 的 Image 组件提供：

  • 自动图片优化
  • 默认懒加载
  • 响应式 srcSet
  • 占位模糊（placeholder blur）
  • 内置加载体验
import Image from "next/image";
<Image  src="/image.jpg"  alt="Example"  width={300}  height={200}  className="rounded-lg shadow-md"  placeholder="blur" // 可选：模糊占位  blurDataURL="data:image/..." // 可选：base64 模糊数据/>