Блог

На моем веб-сайте React у меня есть вертикальный список скриншотов моих прошлых проектов, при первой загрузке страницы загружаются изображения, но они являются лишь фрагментом, пока пользователь не наведет на них курсор.

После наведения курсора мыши изображения расширяются до полного размера, а затем работают должным образом. Я пытаюсь запретить пользователю зависать над ними, чтобы он правильно загружался.
Список отображается из массива

 items: [
        {
          image: "./images/spokanepowerstroke.jpg",
          title: "Spokane Power Stroke",
          link: "/powerstroke",
        },
       ...
      ]    
  

 <Col md="auto">
      {this.state.items.map(({ title, image, link }) => (
        <motion.div className="thumbnail" variants={thumbnailVariants}>
          {" "}
          <motion.div 
          key={title}
            className="frame"
            whileHover="hover"
            variants={frameVariants}
            transition={transition}
          >
            <p className="projectstitle">{title}</p>
            <Link to={link}>
              <motion.img
                src={image}
                alt={image}
                variants={imageVariants}
                transition={transition}
              />
            </Link>
          </motion.div>
        </motion.div>
      ))}
</Col>
    
  

А эффекты наведения и перехода управляются движением фреймера.

 const transition = { duration: 0.5, ease: [0.43, 0.13, 0.23, 0.96] };

const thumbnailVariants = {
  initial: { scale: 0.9, opacity: 0 },
  enter: { scale: 1, opacity: 1, transition },
  exit: {
    scale: 0.5,
    opacity: 0,
    transition: { duration: 1.5, ...transition },
  },
};

const frameVariants = {
  hover: { scale: 0.95 },
};

const imageVariants = {
  hover: { scale: 1.1 },
};
const changepage = {
  in: {
    opacity: 1,
  },
  out: {
    opacity: 0,
  },
};
const pagetransition = {
  duration: 1.5,
};
  

Я просмотрел свой код и не нашел причин, по которым изображения загружаются только частично.
Веб-сайт доступен для просмотра здесь Веб-сайт
И репозиторий Github со всем кодом находится здесь, на Github
(страница проектов)

Заранее благодарю вас за ваш опыт.

В вашем App.css коде измените это: .thumbnail img { width: 46vw; height: 100%; }

Для height:auto;

% высоты обычно растягивают / искажают изображение, если вы хотите сохранить соотношение сторон auto

также, возможно, установка width amp; height для элемента img в вашем коде может помочь предотвратить проблемы с размерами, потому что прямо сейчас браузер не знает, насколько велико изображение на самом деле, и поскольку оно загружается через React JS, а не в HTML, который был первым, он, вероятно, не сможет его вычислить, пока анимация наведения не заставитперерисовка.