如果 NextJS Image 最初不可见，则无法在 iOS 16 上渲染，这可能是什么原因？

Question

我决定使用 NextJS 来实现更快的路由和图像优化。不幸的是，某些图像无法在 iOS 设备上正确加载。我有一个可滚动的水平容器，其中包含产品图片。

有些图像超出了可见区域，因此您需要滚动才能看到它们。

在网络上，它可以正常工作。但当我在 iPhone（iOS 16）的 Safari 浏览器上测试它时，我注意到可见区域之外的图像根本没有渲染。让我表明我的意思。

应该如何（Chrome 设备工具）：

iOS 16 上的实际情况如何：

奇怪的是，如果我旋转手机，它实际上会渲染图像。

我正在使用 Image/Next 组件，并将优先级和未优化的属性设置为 true。我尝试过使用和不使用两者，但没有任何改变。

我在前端使用最新的 NextJS。根本没有其他图书馆。后端是一个 Express 服务器，但它只提供图像路径等。服务器是带有反向代理的 Nginx。

这是 React 代码：

import styles from "../styles/ProductItem.module.css";
import priceFormat from "../Helpers/priceFormat";
import Image from "next/image";
import Percentage from "./icons/Percentage";
import { useRouter } from "next/router";

function ProductItem(props) {
  const router = useRouter();

  let marginStyle = {};

  if (props.noLeftMargin) marginStyle.marginLeft = 0;
  if (props.noRightMargin) marginStyle.marginRight = 0;

  return (
    <div
      className={`${styles.itemContainer} ${props.className}`}
      style={marginStyle}
      onClick={() => router.push("/product/" + props.data.id)}
    >
      <div className={styles.imageContainer}>
        <Image
          className={styles.productImg}
          src={props.data.imgSmall}
          width={160}
          height={160}
          alt={props.data.name}
          priority={true}
          unoptimized={true}
        />
        {props.data.salePercentage > 0 && (
          <div className={styles.percentageContainer}>
            <Percentage className={styles.percentageSvg} />
            <div className={styles.percentageOffText}>
              {`%${props.data.salePercentage}`}
              <br />
              OFF
            </div>
          </div>
        )}
      </div>
      <div className={styles.priceLabel}>
        {props.data.salePercentage
          ? `$${priceFormat(
              props.data.price * ((100 - props.data.salePercentage) / 100)
            )}`
          : `$${priceFormat(props.data.price)}`}
      </div>
      {props.data.salePercentage > 0 && (
        <div className={styles.oldPrice}>{`$${priceFormat(
          props.data.price
        )}`}</div>
      )}
      <div className={styles.productName}>
        {props.data.brand} {props.data.name}
      </div>
    </div>
  );
}

export default ProductItem;

这是通过道具提供的

{data}

：

{
    id: "ca629a01-7c58-49f1-949e-fad574c28b3e",
    imgLarge: "/images/products/electronics_smartphone_1.jpg",
    imgSmall: "/images/products/electronics_smartphone_1_small.jpg",
    brand: "Chip",
    options: [
      {
        name: "Storage",
        values: ["64GB", "128GB", "256GB"],
        affectsPrice: 1,
      },
      {
        name: "Color",
        values: ["black", "white", "gray", "red", "gold", "silver"],
        affectsPrice: 0,
      },
    ],
    name: "Smartphone",
    price: 684,
    salePercentage: 0,
    saleReason: "",
    viewCount: 10438,
    soldCount: 4706,
    maincategory: "electronics",
    rating: "3.60",
    warranty: 2,
    availableColors: ["silver", "gold", "red", "white"],
    subcategory: "electronics_smartphone",
    sellers: [....]
}

您可以在这里测试我的应用程序：Ertuway.com

Answer 1

对于未来遇到同样问题的任何人：

如果将 Image/Next 包装在容器内，并且为容器元素提供 filter:drop-shadow 效果，则由于某些奇怪的原因，Safari 浏览器将无法正确渲染图像。只需删除 filter: drop-shadow 就可以了。

Answer 2

我为此奋斗了两周。

删除

overflow-x

元素（或任何父元素）上

body,html,#__next

的任何修改

我不知道发生了什么，但我怀疑苹果在上次 ios 更新中做了一些事情导致了这种情况。 （因为同一个网站之前运行良好）

无论如何，从上述元素中删除

overflow-x: clip

为我解决了这个问题。

希望对你也有帮助！

Answer 3

我添加了

width

后解决了这个图像问题；你也可以尝试一下，像这样：

<Image src={logo} alt="logo" height={200} width={200} />