Skip to main content

图片 Img

Img 组件用于显示图片，支持设置图片的替换路径（当图片加载失败时），并且支持点击事件、样式及错误处理。此组件在加载图片失败时会自动切换到一个替代的图片路径，保证用户体验。

📦 引入方式​

import { Img } from '@npmqg/react-ui-img';

🧩 使用示例​

📚 最简单的用法​

Example Image

📚 图片加载失败时显示替换图片​

📚 自定义点击事件​

Example Image

🧩 Props​

Prop类型默认值说明
srcstring''图片的源 URL 地址，必须提供
altstring''图片的替代文本，建议提供，以提高无障碍体验和 SEO 优化
replacestring''图片加载失败时显示的替代图片路径
classNamestring''自定义类名，可以与其他样式类一起使用
styleReact.CSSProperties{}内联样式，支持自定义样式
onClick() => void() => void 0图片点击时的回调函数

🧠 组件特性​

  • 错误处理：如果图片加载失败，组件会显示 replace 属性中指定的替代图片，以提高用户体验。
  • 点击事件：onClick 属性允许你为图片添加点击事件处理函数。
  • 自定义样式：可以通过 className 和 style 属性为图片添加自定义样式。
  • 简洁的 API：只需要传递 src 和 alt，即可以实现基本的图片展示功能。

🧱 组件结构说明​

  • 图片路径：组件首先尝试加载 src 属性指定的图片。如果加载失败，则会切换到 replace 指定的替代图片。
  • 错误处理：通过 onError 事件监听图片加载错误，并设置 hasError 状态，控制显示替代图片。
  • 样式与类名：可以通过 className 和 style 属性自定义图片的外观，确保组件可以适应各种布局需求。

⚙️ 性能优化​

  • 使用了 useState 来控制图片是否加载成功，通过 hasError 状态来避免每次图片加载失败时重新计算。
  • 使用 memo 包裹组件，避免不必要的重新渲染，提升性能。

📝 注意事项​

  • 确保传入的 src 属性为有效的图片路径。
  • 如果使用 replace 属性，确保提供的替代图片路径有效，以防止进一步的加载错误。
  • 通过 onClick 事件可以为图片添加交互功能，结合图片展示和点击事件实现更多功能。