时间戳

首页 > 解决方案 > 加载图像时从数据中加载散列图像

javascript - 加载图像时从数据中加载散列图像

问题描述

我正在制作一个带有反应的项目，我从 JSON 文件中获取数据。我用 URL 加载图像

<img src={image} />

我的数据中有一个散列图像（模糊），我想在等待渲染真实图像时显示它。有什么要做的吗？

JSON就像：

"hash": "UUKJMXvM{V@AHRQwvxZXSs9s;o0",
"image": "https://www.imageurl.com/",

标签： javascriptreactjs

解决方案

您可以使用react-progressive-imagewhich 是用于渐进式图像加载的 npm 包。您可以使用以下方式安装它：

npm i react-progressive-image

然后像这样使用它：

<ProgressiveImage src={image} placeholder={hash}>
  {src => <img src={src} alt="an image" />}
</ProgressiveImage>

希望这会帮助你。

推荐阅读