reactjs - lazysizes 不是延迟加载图片

Question

lazysizes似乎使用起来很简单，但我无法让它真正延迟加载带有反应的图像......它会在滚动到视图之前加载视口之外的底部图像，正如您在这个最小的代码框示例中看到的那样。

const id = Math.floor(Math.random() * 500);

<img
 style={{ width: 500, height: 500 }}
 src={`https://picsum.photos/id/${id}/20`}
 data-src={`https://picsum.photos/id/${id}/1000`}
 className="lazyload blur-up"
 alt=""
/>

.blur-up {
  -webkit-filter: blur(30px);
  filter: blur(30px);
  transition: filter 400ms, -webkit-filter 400ms;
}

.blur-up.lazyloaded {
  -webkit-filter: blur(0);
  filter: blur(0);
}

（此代码几乎完全是从lazysizes 文档中复制的）

我究竟做错了什么？