我认为这个问题是由以下两件事之一引起的：
1.确保您没有在Devtools网络选项卡中打开Disable cache
1.您可以考虑预先预加载图像（display: none不会在后台加载图像，因此解决方案是将图像大小设为1px x x 1px，不透明度为0），以防止图像 Flink ：

import React, {
  useEffect,
  useLayoutEffect,
  useState,
  useRef,
  useMemo,
  memo
} from 'react';

// Mui
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
import {
  Container,
  Box,
  Paper,
  Switch,
  Slide,
  FormControlLabel,
  Zoom,
  Grow
} from '@material-ui/core/';
// Rdux
import { useAppSelector } from '../../redux-store/hooks';

interface Props {
  homePage: boolean;
  loading: boolean;
}

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    image: {
      maxWidth: '100vw',
      marginTop: 'auto', // L2 This is to make the image stick to footer..
      backgroundRepeat: 'no-repeat',
      maxHeight: '82vh',
      backgroundSize: 'auto',
      filter:
        'grayscale(50%) drop-shadow(12px 12px 12px rgba(128,128,128 ,0.1))',
      display: 'block'
    },
    hide: {
      position: 'absolute',
      width: '1px',
      height: '1px',
      opacity: '0'
    }
  })
);

const cx = (...classes: any[]) => {
  return classes.filter(Boolean).join(' ');
};

const SplashImages: React.FC<Props> = memo(({ homePage, loading }) => {
  const maleImageUrl = '// some url';
  const femaleImageUrl = '// some url';
  const dogImageUrl = '// some url';

  const male = useMemo(() => maleImageUrl, []);
  const female = useMemo(() => femaleImageUrl, []);
  const dog = useMemo(() => dogImageUrl, []);

  const classes = useStyles();
  // Redux
  const currentUser = useAppSelector((state) => state.auth.currentUser);
  // Local State
  const [isMale, setIsMale] = useState(true);

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      setIsMale(!isMale);
    }, 3000);

    return () => clearTimeout(timeoutId);
  }, [isMale]);

  const showMale = currentUser?.userType !== 'dog' && isMale;
  const showFemale = currentUser?.userType !== 'dog' && !isMale;

  return (
    <>
      <img
        src={male}
        className={cx(classes.image, showMale ? null : classes.hide)}
      />
      <img
        src={female}
        className={cx(classes.image, showFemale ? null : classes.hide)}
      />
      <img
        src={dog}
        className={cx(
          classes.image,
          currentUser?.userType === 'dog' ? null : classes.hide
        )}
      />
    </>
  );
});

// Export usning memo to prevent re-rendering
export default React.memo(SplashImages);