加載圖像時從數據中加載散列圖像

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>

希望這會幫助你。