前言
对于前端工程师而言，图片资源是必不可少的。但是，Web上图片的加载速度往往比较慢，并且有些图片可能需要异步加载。这时候，react-async-image这个 npm 包就非常有用了。它可以优雅地处理图片的异步加载，使页面看起来更加流畅。本文将介绍该包的使用方式、详细的说明和相关示例代码。
安装 react-async-image
在开始使用该 npm 包之前，我们需要先安装它。使用npm install react-async-image命令，即可将它添加到你的项目中。
快速上手
使用 react-async-image 时，我们需要安装它所依赖的 react和prop-types，然后引入它。我们假设你已经熟悉了 React 的使用方法，那么下面我们就可以开始使用 react-async-image。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------------------
----- --- - -- -- -
------ -
------
------------------------------------------------
-----------------------------------
------ ------ ----- ---- ---------
--
--
--
------ ------- ----在上面的例子中，我们将 react-async-image 引入并使用它来加载一张 300*200 大小的随机图片。当图片正在加载时，我们会看到一个“Loading...”的提示。而在图片加载完毕后，我们将会看到这个图片。
选项参数详解
我们来分别看看 react-async-image 中的各项选项参数的使用方法。
src
src 是 react-async-image 中最基本的选项。通过它，我们可以指定所需要加载的图片的 url。同时，也可以将其设置为 null，使其不再请求图片资源。下面的代码演示了如何使用src。
<Image
src={
'https://source.unsplash.com/random/300x200' // or null
}
/>placeholder
当图片在加载时，我们希望页面上有一个指示器，以指示用户图片正在加载。此时，参数placeholder应运而生。在参数placeholder中，我们可以放置任何你想要显示的 jsx 元素。下面的代码演示了如何使用它。
<Image
src="https://source.unsplash.com/random/300x200"
placeholder={<div>Loading...</div>}
/>actualSrc
上一节中，我们介绍了如何使用图片预加载指示器。但是，如果我们想要将初始的占位符替换为一个小占位符，请使用该actualSrc选项。 也就是说，当源src加载成功后，react-async-image 将把actualSrc的值设置为源src的值。如下所示：
<Image
src="/static/images/placeholder.jpg"
actualSrc="https://source.unsplash.com/random/300x200"
placeholder={<div>Loading...</div>}
/>component
设置该component属性可以创建自定义的组件，而不是使用原生 HTML img 标签。如下所示：
<Image
component={() => <span className="image-wrapper" />}
src="https://source.unsplash.com/random/300x200"
/>loadOnMount
设置该选项将在组件挂载时加载图片，并在src更新后重新加载，而不是使用默认的懒加载。如下所示：
<Image
loadOnMount
src="https://source.unsplash.com/random/300x200"
placeholder={<div>Loading...</div>}
/>onLoad
当图片加载完成后，我们可以执行一个函数。在 react-async-image 中，我们可以使用onLoad来指定这个函数。如下所示：
function handleOnLoad() {
console.log('Image loaded');
}
<Image
onLoad={handleOnLoad}
src="https://source.unsplash.com/random/300x200"
/>可以将其设置为异步函数，而不是使用上面的同步函数。如下所示：
async function handleOnLoad() {
console.log('Image loaded');
}
<Image
onLoad={handleOnLoad}
src="https://source.unsplash.com/random/300x200"
/>useSuspense
这个参数的工作原理类似于 React Suspense。将其设置为 true 后，图片将不再按需加载，而是一次性地加载并缓存它。如果使用 "Image" 组件的 props 会导致挂起，例如当源存在于异步列表中时，则它将挂起。如下所示：
-- -------------------- ---- ------- -------- -------------- - ------------------ --------- - ------ ----------- --------------------- ------------------------------------------------ --
示例代码
最后，我们为了方便大家，提供一个综合的示例代码，以方便大家学习和参考：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------------------
----- --- - -- -- -
------ -
---- ----------------------
--------- ----- ------------
------
------------------------------------------------
------ ------ ----- ---- ---------
-----------------------------------
------------- -- ----- ------------------------- ---
---------- -- ------------------ ---------
-----------
--
------
--
--
------ ------- ----总结
在本文中，我们分享了一种简单易用的方式使用 npm 包 react-async-image，以选择最优化的方式处理图片资源，以在用户加载网站速度快的同时，保证良好的视觉效果，以便提高网站的再现和用户的体验。如果需要使用异步加载图片，或者需要在加载图片时显示表现完美的样式，请使用这个简便的解决方案，它使得 web 开发变得更加顺畅和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067380890c4f72775841e0