Проблема с конфигурацией imgix Nextjs с параметрами ?url

Question

Я пытаюсь настроить встроенный загрузчик imgix для nextjs 12+.

Когда я смотрю в дом, srcsets выглядят следующим образом: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
  />

Answer 1

Как упоминалось в первом комментарии, больше не поддерживает глобальные конфигурации загрузчика . Вы должны использовать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 Pattern , чтобы предоставить эту поддержку любомуnext/imageкомпонент, который вы используете. Это избавит от необходимости устанавливать его встроенным в каждый экземпляр компонента.

Взгляните на эту CodeSandbox , где мы используем шаблон Provider, чтобы дать все Next<Image />компоненты той же конфигурации загрузчика imgix, если вы хотите узнать больше.

Answer 2

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