Javascript <；img/>；onload不随机加载'；自定义映像组件中的t触发器

我正在开发一个react单页应用程序，用户可以在不同的帖子之间切换

页面根据新的url参数（react router）更新图像。图像切换按预期工作，但如果用户的互联网速度较慢，则旧图像会一直保留，直到加载新图像

这不是很好，所以我创建了一个图像包装器组件，在源代码更改时显示加载微调器

由于某些原因，在随机时间加载图像时，加载状态不会重置。这主要发生在Safari中，但也可能发生在Chrome/Firefox中（但频率要低得多）

以下是我的组件代码：

export const Image = ({
  aspectRatio = 1,
  alt,
  src,
  style,
  onError,
  placeholderStyle,
  ...rest
}) => {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    setLoading(true);
  }, [src]);

  const imageStyle = {
    position: loading ? 'absolute' : 'initial',
    visibility: loading ? 'hidden' : 'visible',
  };
  return (
    <>
      {loading ? (
        <div className="imagePlaceholder" style={placeholderStyle}>
          <div style={{ paddingTop: aspectRatio * 100 + '%' }} />
          <Loader />
        </div>
      ) : null}
      <img
        style={{ ...imageStyle, ...style }}
        src={src}
        alt={alt}
        onError={(e) => {
          setLoading(false);
          onError && onError(e);
        }}
        onLoad={() => setLoading(false)}
        loading="lazy"
        {...rest}
      />
    </>
  );
};

导出常量图像=({
aspectRatio=1，
中高音，
src，
风格
一个错误，
占位符样式，
休息
}) => {
const[loading，setLoading]=useState（true）；
useffect（（）=>{
设置加载（真）；
}，[src]）；
常量imageStyle={
位置：加载？'absolute'：'initial'，
可见性：正在加载“隐藏”：“可见”，
};
返回(
{加载(
)：null}
{
设置加载（假）；
onError&&onError（e）；
}}
onLoad={（）=>setLoading（false）}
加载=“懒惰”
{…休息}
/>
);
};

---

我做错了什么吗？

如果我对onLoad函数使用50毫秒的setTimeout，这似乎是可行的，但这不是解决方案。。。