图像在悬停之前无法完全加载答案

【问题标题】：Images not loading fully until hovered over图像在悬停之前无法完全加载
【发布时间】：2020-09-24 03:27:26
【问题描述】：

在我的 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,
};

我查看了我的代码，并没有发现图像仅部分加载的原因。该网站可在此处查看Website 包含所有代码的 Github 存储库在这里 Github （项目页面）
提前感谢您的专业知识。

【问题讨论】：

标签： javascript html css reactjs framer-motion

【解决方案1】：

在您的 App.css 代码中，更改以下内容： .thumbnail img { width: 46vw; height: 100%; }

致height:auto;

% 高度通常会拉伸/扭曲图像，如果你想保持纵横比，请使用 auto

也可能在代码中设置 img 元素的宽度和高度可能有助于防止大小问题，因为现在浏览器不知道图像的实际大小，并且因为它是通过 React JS 加载的，而不是在 HTML 中第一次服务它可能无法计算它，直到悬停动画强制重新绘制。

【讨论】：