NextJS 将链接包裹在 NextJS 图像周围 - 导致图像显得更小

Question

我想在图像周围包裹一个链接标签。然而，这样做时，图像看起来比以前小得多（添加链接标签之前）。如何使图像恢复到原始大小？

为了清楚起见，删除链接标签，图像尺寸将根据需要显示。添加链接标签，图像显示比预期小得多。

我正在使用 MaterialUI、NextJS Image 标签和下一个版本“14.2.9”。

  <Link href={`/services/${link}`}>
          <Box
            sx={{
              display: "block",
              borderRadius: "0 0 2rem 0",
              overflow: "hidden",
              width: "100%",
              height: "100%",
              cursor: "pointer",
              position: "relative",
              "&:hover::before": {
                content: '""',
                position: "absolute",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%",
                backgroundColor: "rgba(0, 0, 0, 0.5)",
                zIndex: 1,
              },
              "&:hover": {
                boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.5)",
              },
            }}
          >
            <Image
              src={imageSrc}
              alt={title}
              priority={false}
              sizes="100vw"
              style={{ width: "100%", height: "100%" }}
              width={400}
              height={400}
            />
          </Box>
      </Link>

Answer 1

您遇到的问题可能是由链接标记应用样式引起的。 所以我推荐以下链接样式。

<Link href={`/services/${link}`} style={{display: "flex", width: "fit-content"}}>
    <Box
      sx={{
        display: "block",
        borderRadius: "0 0 2rem 0",
        overflow: "hidden",
        width: "100%",
        height: "100%",
        cursor: "pointer",
        position: "relative",
        "&:hover::before": {
          content: '""',
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
          backgroundColor: "rgba(0, 0, 0, 0.5)",
          zIndex: 1,
        },
        "&:hover": {
          boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.5)",
        },
      }}
    >
      <Image
        src={imageSrc}
        alt={title}
        priority={false}
        sizes="100vw"
        style={{ width: "100%", height: "100%" }}
        width={400}
        height={400}
      />
    </Box>
</Link>