图片元素导致调整浏览器大小时对野生动物园做出反应时出现毛刺

如何解决图片元素导致调整浏览器大小时对野生动物园做出反应时出现毛刺

尝试查看是否有人对此错误有更多了解：

当我调整浏览器的大小时（仅在Safari中-其他浏览器很平滑）-<picture>元素图像会出现毛刺，而不是保持可见。

我找到了造成此问题的原因，并找到了解决方法，但是我不确定为什么要解决此问题，或者不确定是否有更好的解决方法。在反应中，我有条件：

import LazyLoad from "react-lazyload";

const Image = ({ ...props }) => {
  return noLazy ? (
    <RenderImage />
  ) : (
    <LazyLoad
      height={LOADING.HEIGHT}
      offset={LOADING.OFFSET}
      once
      {...restProps}
    >
      <RenderImage/>
    </LazyLoad>

  )
}

其中renderImage是一个返回图片元素的函数：

const RenderImage = () => {
    return (
      <picture onLoad={onLoad}>
        {tabletSrc && (
          <source
            srcSet={images(desktopSrc)}
            media={`(min-width: ${BREAKPOINTS.LG}px)`}
          />
        )}
        <source
          srcSet={images(tabletSrc ? tabletSrc : desktopSrc)}
          media={`(min-width: ${BREAKPOINTS.MED}px)`}
        />
        <img
          className={`image ${classes ? classes : ""}`}
          src={images(mobileSrc)}
          alt={alt ? alt : ""}
        />
      </picture>
    );
  };

如果不将其放入主条件中，而不是调用该函数，则一切正常：

import LazyLoad from "react-lazyload";

const Image = ({ ...props }) => {
  return noLazy ? (
    <picture onLoad={onLoad}>
        {tabletSrc && (
          <source
            srcSet={images(desktopSrc)}
            media={`(min-width: ${BREAKPOINTS.LG}px)`}
          />
        )}
        <source
          srcSet={images(tabletSrc ? tabletSrc : desktopSrc)}
          media={`(min-width: ${BREAKPOINTS.MED}px)`}
        />
        <img
          className={`image ${classes ? classes : ""}`}
          src={images(mobileSrc)}
          alt={alt ? alt : ""}
        />
      </picture>
  ) : (
    <LazyLoad
      height={LOADING.HEIGHT}
      offset={LOADING.OFFSET}
      once
      {...restProps}
    >
      <picture onLoad={onLoad}>
        {tabletSrc && (
          <source
            srcSet={images(desktopSrc)}
            media={`(min-width: ${BREAKPOINTS.LG}px)`}
          />
        )}
        <source
          srcSet={images(tabletSrc ? tabletSrc : desktopSrc)}
          media={`(min-width: ${BREAKPOINTS.MED}px)`}
        />
        <img
          className={`image ${classes ? classes : ""}`}
          src={images(mobileSrc)}
          alt={alt ? alt : ""}
        />
      </picture>
    </LazyLoad>

  )
}

有人对此有更多了解吗？想保持事物干燥，更普遍地知道为什么会发生。