Nextjs imgix配置问题与？url参数有关

a9wyjsp7 于 2023-01-25 发布在其他

关注(0)|答案(2)|浏览(132)

我正在尝试为nextjs12+设置内置imgix加载器。
当我查看dom时，srcset如下所示：https://account.imgix.net/?url=%2Fhero.jpeg%26fm%3Dwebp&w=640&q=20
它附加了这个？url =，并且图像没有显示，因为它。不确定是否有什么我错过了或不明白？
先谢谢你!
我的设置：

Next.config.js
    loader: "imgix",
    path: "https://account.imgix.net/",
    domains: ["account.imgix.net"],

然后我试着渲染一个next/image组件，如下所示：

<Image
    alt="hero"
    src={`/hero.jpeg`}
    fill
    quality={20}
    style={{
      objectFit: "cover",
      objectPosition: "20% center",
      borderRadius: 10,
    }}
    priority
  />

next.js

来源：https://stackoverflow.com/questions/75211608/nextjs-imgix-configuration-issue-with-url-params

2条答案

按热度按时间

m3eecexj1#

正如第一条评论中提到的，next/image不再支持全局加载器配置，您必须使用loader属性。

// Example next/image loader

import Image from "next/image";

const normalizeSrc = (src) => (src[0] === "/" ? src.slice(1) : src);

const imgixLoader = ({ src, width, quality }) => {
  const url = new URL("https://example.com/" + normalizeSrc(src));
  const params = url.searchParams;
  params.set("auto", params.getAll("auto").join(",") || "format");
  params.set("fit", params.get("fit") || "max");
  params.set("w", params.get("w") || width.toString());
  if (quality) {
    params.set("q", quality.toString());
  }
  return url.href;
};

const MyImage = (props) => {
  return (
    <Image
      loader={imgixLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  );
};

然而，如果你不想在每次使用组件时都这样做，你可以使用React Provider模式为你正在使用的任何next/image组件提供这个属性，这样就不需要在组件的每个示例上内联设置它。
如果您想了解更多信息，请看一下this CodeSandbox，其中我们使用Provider模式为所有Next <Image />组件提供相同的imgix加载器配置。

赞(0）回复(0）举报 2023-01-25

lf5gs5x22#

看起来next 13不再支持全局加载器了，所以我必须给我渲染的每个图像组件添加加载器。

赞(0）回复(0）举报 2023-01-25