介绍
Hyperimg 是一个基于 React 的图片组件库，能够快速地加载图片并提供多种样式展示。
使用 Hyperimg，你可以避免频繁把图片的地址写入 HTML，因为 Hyperimg 可以根据配置自动加载图片，同时也避免了手动调整图片大小的麻烦。
安装
在终端中执行以下命令：
--- ------- --------
如果你使用的是 Yarn，可以使用以下命令：
---- --- --------
使用
要使用 Hyperimg，首先需要在 React 项目中导入组件：
------ -------- ---- -----------
Hyperimg 组件的基本用法如下：
--------- ------------------------------------ ------------- ----------- ------------ -------- ------- ---- ----- ---- -- --
属性
Hyperimg 组件支持以下属性：
src
图片的地址。
--------- ------------------------------------ --
alt（可选）
图片的辅助说明。
--------- ------------------------------------ ------------- --
width（可选）
图片的宽度，可以是数值或字符串。
--------- ------------------------------------ ----------- -- --------- ------------------------------------ ----------- --
height（可选）
图片的高度，可以是数值或字符串。
--------- ------------------------------------ ------------ -- --------- ------------------------------------ ------------ --
style（可选）
图片的样式，可以是一个对象或数组。
--------- ------------------------------------ -------- ------- ---- ----- ---- -- --
fallback（可选）
当图片加载失败时，显示的备用图。
--------- ------------------------------------ ------------------------ --
onLoad（可选）
当图片加载完成时的回调函数。
--------- ------------------------------------ ---------- -- ---------------------- --
onError（可选）
当图片加载失败时的回调函数。
--------- ------------------------------------ ----------- -- ---------------------- --
示例
自适应宽度
------ -------- ---- -----------
-------- ----- -
------ -
---- -------- ------ ----- ---
--------- ------------------------------------ ------------- --
------
--
-加载失败时显示默认图
------ -------- ---- -----------
-------- ----- -
------ -
---------
------------------------------------
-------------
------------------------
--
--
-定义样式
------ -------- ---- -----------
-------- ----- -
------ -
---------
------------------------------------
-------------
-----------
------------
-------- ------- ---- ----- ---- --
--
--
-总结
Hyperimg 是一个非常实用的 React 组件库，它可以帮助开发者快速地加载图片并提供多种样式展示。通过本文的介绍，你可以了解到 Hyperimg 的基本用法和常见属性。希望本文对你有帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005671981e8991b448e36e4