加载图像时从数据加载哈希图像

Question

我正在用React创建一个项目，并且我从JSON文件中获取数据。我用URL加载图像

<img src={image} />

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

JSON就像：

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

Answer 1

您可以使用react-progressive-image，它是用于逐步加载图像的npm软件包。您可以使用以下命令进行安装：

npm i react-progressive-image

然后像这样使用它：

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

希望这会对您有所帮助。