有很多关于动画加载图像的主题，但我还没有在 React 中看到一个很好的例子。我自己带了这个组件：

import { useState } from 'react';

export default function FadingImage({ src,...props }) {
    const [loaded,setLoaded] = useState(false);

    return (
        <img
            src={src}
            onLoad={() => setLoaded(true)}
            classname={!loaded ? 'loading' : ''}
            {...props}
        />
    );
};

img {
    transition: opacity .25s;
}

.loading {
    opacity: 0;
}

一开始它运行良好，但是很烦人的是相同的图像每次都会淡入。我希望缓存的图像立即显示。

在 vanilla JS 中它可以正常工作，因为它是在同一个渲染周期中完成的。我不确定如何在 React 中实现它。

感谢您提供包装建议，但我也想知道如何出于教育目的而这样做。