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