javascript - 仅在没有缓存的情况下反应模糊

Question

我正在使用 React 在 Next.JS 中构建一个应用程序，我们有一个图像模糊实现，可以很好地解决一个问题。这是实现的草图：

function ImageElement({src, srcSet, sizes, base64}){
  const [loaded, setLoaded] = useState(false);
  const imgRef = useRef();

  useEffect(() => {
    if(imgRef.current.complete){
      setLoaded(true)
    }
  }, []);

  return (
    <div>
      <img className="placeholder" src={base64} alt="" />
      <img
        className="regular"
        srcSet={srcSet}
        sizes={sizes}
        loading="lazy"
        decoding="async"
        style={{
          opacity: loaded ? 1 : 0
        }}
        ref={imgRef}
        onLoad={handleLoaded}
      />
    </div>
  );

还有一个transition: opacity 500ms ease 0s关于图像和其他各种 css 的规则以使其工作（尽管这些似乎不是问题的根源）。

我遇到的问题是，因为不透明度总是从 0 开始，所以每次页面加载时都会进行模糊处理，即使图像被缓存并且不需要缓存也是如此。我想找到一种方法来检查它在第一次渲染之前是否已缓存，但我尝试过的任何方法都没有奏效。

我尝试了一个创建img元素并检查它是否已加载的函数，但是在我构建时它似乎不起作用，并且在开发模式下收到此错误消息：

Prop `style` did not match. Server: "opacity:0" Client: "opacity:1"

有什么我想念的吗？

标签： javascriptreactjsnext.js