nextjsImage.js

"use strict";
Object.defineProperty(exports, "__esModule", {
  value: true,
});
exports.default = Image;
var _react = _interopRequireDefault(require("react"));
var _head = _interopRequireDefault(require("../shared/lib/head"));
var _toBase64 = require("../shared/lib/to-base-64");
var _imageConfig = require("../server/image-config");
var _useIntersection = require("./use-intersection");
function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true,
    });
  } else {
    obj[key] = value;
  }
  return obj;
}
function _interopRequireDefault(obj) {
  return obj && obj.__esModule
    ? obj
    : {
        default: obj,
      };
}
function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    var ownKeys = Object.keys(source);
    if (typeof Object.getOwnPropertySymbols === "function") {
      ownKeys = ownKeys.concat(
        Object.getOwnPropertySymbols(source).filter(function (sym) {
          return Object.getOwnPropertyDescriptor(source, sym).enumerable;
        })
      );
    }
    ownKeys.forEach(function (key) {
      _defineProperty(target, key, source[key]);
    });
  }
  return target;
}
function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};
  var target = _objectWithoutPropertiesLoose(source, excluded);
  var key, i;
  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }
  return target;
}
function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;
  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }
  return target;
}
const loadedImageURLs = new Set();
const allImgs = new Map();
let perfObserver;
const emptyDataURL =
  "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
if (typeof window === "undefined") {
  global.__NEXT_IMAGE_IMPORTED = true;
}
const VALID_LOADING_VALUES = ["lazy", "eager", undefined];
const loaders = new Map([
  ["default", defaultLoader],
  ["imgix", imgixLoader],
  ["cloudinary", cloudinaryLoader],
  ["akamai", akamaiLoader],
  ["custom", customLoader],
]);
const VALID_LAYOUT_VALUES = [
  "fill",
  "fixed",
  "intrinsic",
  "responsive",
  undefined,
];
function isStaticRequire(src) {
  return src.default !== undefined;
}
function isStaticImageData(src) {
  return src.src !== undefined;
}
function isStaticImport(src) {
  return (
    typeof src === "object" && (isStaticRequire(src) || isStaticImageData(src))
  );
}
const {
  deviceSizes: configDeviceSizes,
  imageSizes: configImageSizes,
  loader: configLoader,
  path: configPath,
  domains: configDomains,
} = process.env.__NEXT_IMAGE_OPTS || _imageConfig.imageConfigDefault;
// sort smallest to largest
const allSizes = [...configDeviceSizes, ...configImageSizes];
configDeviceSizes.sort((a, b) => a - b);
allSizes.sort((a, b) => a - b);
function getWidths(width, layout, sizes) {
  if (sizes && (layout === "fill" || layout === "responsive")) {
    // Find all the "vw" percent sizes used in the sizes prop
    const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
    const percentSizes = [];
    for (let match; (match = viewportWidthRe.exec(sizes)); match) {
      percentSizes.push(parseInt(match[2]));
    }
    if (percentSizes.length) {
      const smallestRatio = Math.min(...percentSizes) * 0.01;
      return {
        widths: allSizes.filter(
          (s) => s >= configDeviceSizes[0] * smallestRatio
        ),
        kind: "w",
      };
    }
    return {
      widths: allSizes,
      kind: "w",
    };
  }
  if (
    typeof width !== "number" ||
    layout === "fill" ||
    layout === "responsive"
  ) {
    return {
      widths: configDeviceSizes,
      kind: "w",
    };
  }
  const widths = [
    ...new Set( // > This means that most OLED screens that say they are 3x resolution,
      // > are actually 3x in the green color, but only 1.5x in the red and
      // > blue colors. Showing a 3x resolution image in the app vs a 2x
      // > resolution image will be visually the same, though the 3x image
      // > takes significantly more data. Even true 3x resolution screens are
      // > wasteful as the human eye cannot see that level of detail without
      // > something like a magnifying glass.
      // https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html
      [width, width * 2 /*, width * 3*/].map(
        (w) => allSizes.find((p) => p >= w) || allSizes[allSizes.length - 1]
      )
    ),
  ];
  return {
    widths,
    kind: "x",
  };
}
function generateImgAttrs({
  src,
  unoptimized,
  layout,
  width,
  quality,
  sizes,
  loader,
}) {
  if (unoptimized) {
    return {
      src,
      srcSet: undefined,
      sizes: undefined,
    };
  }
  const { widths, kind } = getWidths(width, layout, sizes);
  const last = widths.length - 1;
  return {
    sizes: !sizes && kind === "w" ? "100vw" : sizes,
    srcSet: widths
      .map(
        (w, i) =>
          `${loader({
            src,
            quality,
            width: w,
          })} ${kind === "w" ? w : i + 1}${kind}`
      )
      .join(", "),
    // It's intended to keep `src` the last attribute because React updates
    // attributes in order. If we keep `src` the first one, Safari will
    // immediately start to fetch `src`, before `sizes` and `srcSet` are even
    // updated by React. That causes multiple unnecessary requests if `srcSet`
    // and `sizes` are defined.
    // This bug cannot be reproduced in Chrome or Firefox.
    src: loader({
      src,
      quality,
      width: widths[last],
    }),
  };
}
function getInt(x) {
  if (typeof x === "number") {
    return x;
  }
  if (typeof x === "string") {
    return parseInt(x, 10);
  }
  return undefined;
}
function defaultImageLoader(loaderProps) {
  const load = loaders.get(configLoader);
  if (load) {
    return load(
      _objectSpread(
        {
          root: configPath,
        },
        loaderProps
      )
    );
  }
  throw new Error(
    `Unknown "loader" found in "next.config.js". Expected: ${_imageConfig.VALID_LOADERS.join(
      ", "
    )}. Received: ${configLoader}`
  );
}
// See https://stackoverflow.com/q/39777833/266535 for why we use this ref
// handler instead of the img's onLoad attribute.
function handleLoading(img, src, layout, placeholder, onLoadingComplete) {
  if (!img) {
    return;
  }
  const handleLoad = () => {
    if (img.src !== emptyDataURL) {
      const p = "decode" in img ? img.decode() : Promise.resolve();
      p.catch(() => {}).then(() => {
        if (placeholder === "blur") {
          img.style.filter = "none";
          img.style.backgroundSize = "none";
          img.style.backgroundImage = "none";
        }
        loadedImageURLs.add(src);
        if (onLoadingComplete) {
          const { naturalWidth, naturalHeight } = img;
          // Pass back read-only primitive values but not the
          // underlying DOM element because it could be misused.
          onLoadingComplete({
            naturalWidth,
            naturalHeight,
          });
        }
        if (process.env.NODE_ENV !== "production") {
          var ref;
          if (
            (ref = img.parentElement) === null || ref === void 0
              ? void 0
              : ref.parentElement
          ) {
            const parent = getComputedStyle(img.parentElement.parentElement);
            if (layout === "responsive" && parent.display === "flex") {
              console.warn(
                `Image with src "${src}" may not render properly as a child of a flex container. Consider wrapping the image with a div to configure the width.`
              );
            } else if (
              layout === "fill" &&
              parent.position !== "relative" &&
              parent.position !== "fixed"
            ) {
              console.warn(
                `Image with src "${src}" may not render properly with a parent using position:"${parent.position}". Consider changing the parent style to position:"relative" with a width and height.`
              );
            }
          }
        }
      });
    }
  };
  if (img.complete) {
    // If the real image fails to load, this will still remove the placeholder.
    // This is the desired behavior for now, and will be revisited when error
    // handling is worked on for the image component itself.
    handleLoad();
  } else {
    img.onload = handleLoad;
  }
}
function Image(_param) {
  var {
      src,
      sizes,
      unoptimized = false,
      priority = false,
      loading,
      lazyBoundary = "200px",
      className,
      quality,
      width,
      height,
      objectFit,
      objectPosition,
      onLoadingComplete,
      loader = defaultImageLoader,
      placeholder = "empty",
      blurDataURL,
    } = _param,
    all = _objectWithoutProperties(_param, [
      "src",
      "sizes",
      "unoptimized",
      "priority",
      "loading",
      "lazyBoundary",
      "className",
      "quality",
      "width",
      "height",
      "objectFit",
      "objectPosition",
      "onLoadingComplete",
      "loader",
      "placeholder",
      "blurDataURL",
    ]);
  let rest = all;
  let layout = sizes ? "responsive" : "intrinsic";
  if ("layout" in rest) {
    // Override default layout if the user specified one:
    if (rest.layout) layout = rest.layout;
    // Remove property so it's not spread into image:
    delete rest["layout"];
  }
  let staticSrc = "";
  if (isStaticImport(src)) {
    const staticImageData = isStaticRequire(src) ? src.default : src;
    if (!staticImageData.src) {
      throw new Error(
        `An object should only be passed to the image component src parameter if it comes from a static image import. It must include src. Received ${JSON.stringify(
          staticImageData
        )}`
      );
    }
    blurDataURL = blurDataURL || staticImageData.blurDataURL;
    staticSrc = staticImageData.src;
    if (!layout || layout !== "fill") {
      height = height || staticImageData.height;
      width = width || staticImageData.width;
      if (!staticImageData.height || !staticImageData.width) {
        throw new Error(
          `An object should only be passed to the image component src parameter if it comes from a static image import. It must include height and width. Received ${JSON.stringify(
            staticImageData
          )}`
        );
      }
    }
  }
  src = typeof src === "string" ? src : staticSrc;
  const widthInt = getInt(width);
  const heightInt = getInt(height);
  const qualityInt = getInt(quality);
  let isLazy =
    !priority && (loading === "lazy" || typeof loading === "undefined");
  if (src.startsWith("data:") || src.startsWith("blob:")) {
    // https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
    unoptimized = true;
    isLazy = false;
  }
  if (typeof window !== "undefined" && loadedImageURLs.has(src)) {
    isLazy = false;
  }
  if (process.env.NODE_ENV !== "production") {
    if (!src) {
      throw new Error(
        `Image is missing required "src" property. Make sure you pass "src" in props to the \`next/image\` component. Received: ${JSON.stringify(
          {
            width,
            height,
            quality,
          }
        )}`
      );
    }
    if (!VALID_LAYOUT_VALUES.includes(layout)) {
      throw new Error(
        `Image with src "${src}" has invalid "layout" property. Provided "${layout}" should be one of ${VALID_LAYOUT_VALUES.map(
          String
        ).join(",")}.`
      );
    }
    if (
      (typeof widthInt !== "undefined" && isNaN(widthInt)) ||
      (typeof heightInt !== "undefined" && isNaN(heightInt))
    ) {
      throw new Error(
        `Image with src "${src}" has invalid "width" or "height" property. These should be numeric values.`
      );
    }
    if (layout === "fill" && (width || height)) {
      console.warn(
        `Image with src "${src}" and "layout='fill'" has unused properties assigned. Please remove "width" and "height".`
      );
    }
    if (!VALID_LOADING_VALUES.includes(loading)) {
      throw new Error(
        `Image with src "${src}" has invalid "loading" property. Provided "${loading}" should be one of ${VALID_LOADING_VALUES.map(
          String
        ).join(",")}.`
      );
    }
    if (priority && loading === "lazy") {
      throw new Error(
        `Image with src "${src}" has both "priority" and "loading='lazy'" properties. Only one should be used.`
      );
    }
    if (sizes && layout !== "fill" && layout !== "responsive") {
      console.warn(
        `Image with src "${src}" has "sizes" property but it will be ignored. Only use "sizes" with "layout='fill'" or "layout='responsive'".`
      );
    }
    if (placeholder === "blur") {
      if (layout !== "fill" && (widthInt || 0) * (heightInt || 0) < 1600) {
        console.warn(
          `Image with src "${src}" is smaller than 40x40. Consider removing the "placeholder='blur'" property to improve performance.`
        );
      }
      if (!blurDataURL) {
        const VALID_BLUR_EXT = ["jpeg", "png", "webp", "avif"]; // should match next-image-loader
        throw new Error(`Image with src "${src}" has "placeholder='blur'" property but is missing the "blurDataURL" property.
          Possible solutions:
            - Add a "blurDataURL" property, the contents should be a small Data URL to represent the image
            - Change the "src" property to a static import with one of the supported file types: ${VALID_BLUR_EXT.join(
              ","
            )}
            - Remove the "placeholder" property, effectively no blur effect
          Read more: https://nextjs.org/docs/messages/placeholder-blur-data-url`);
      }
    }
    if ("ref" in rest) {
      console.warn(
        `Image with src "${src}" is using unsupported "ref" property. Consider using the "onLoadingComplete" property instead.`
      );
    }
    if ("style" in rest) {
      console.warn(
        `Image with src "${src}" is using unsupported "style" property. Please use the "className" property instead.`
      );
    }
    if (!unoptimized) {
      const urlStr = loader({
        src,
        width: widthInt || 400,
        quality: qualityInt || 75,
      });
      let url;
      try {
        url = new URL(urlStr);
      } catch (err) {}
      if (urlStr === src || (url && url.pathname === src && !url.search)) {
        console.warn(
          `Image with src "${src}" has a "loader" property that does not implement width. Please implement it or use the "unoptimized" property instead.` +
            `\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader-width`
        );
      }
    }
    if (
      typeof window !== "undefined" &&
      !perfObserver &&
      window.PerformanceObserver
    ) {
      perfObserver = new PerformanceObserver((entryList) => {
        for (const entry of entryList.getEntries()) {
          var ref;
          // @ts-ignore - missing "LargestContentfulPaint" class with "element" prop
          const imgSrc =
            (entry === null || entry === void 0
              ? void 0
              : (ref = entry.element) === null || ref === void 0
              ? void 0
              : ref.src) || "";
          const lcpImage = allImgs.get(imgSrc);
          if (
            lcpImage &&
            !lcpImage.priority &&
            lcpImage.placeholder !== "blur" &&
            !lcpImage.src.startsWith("data:") &&
            !lcpImage.src.startsWith("blob:")
          ) {
            // https://web.dev/lcp/#measure-lcp-in-javascript
            console.warn(
              `Image with src "${lcpImage.src}" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.` +
                `\nRead more: https://nextjs.org/docs/api-reference/next/image#priority`
            );
          }
        }
      });
      perfObserver.observe({
        type: "largest-contentful-paint",
        buffered: true,
      });
    }
  }
  const [setRef, isIntersected] = (0, _useIntersection).useIntersection({
    rootMargin: lazyBoundary,
    disabled: !isLazy,
  });
  const isVisible = !isLazy || isIntersected;
  const wrapperStyle = {
    boxSizing: "border-box",
    display: "block",
    overflow: "hidden",
    width: "initial",
    height: "initial",
    background: "none",
    opacity: 1,
    border: 0,
    margin: 0,
    padding: 0,
  };
  const sizerStyle = {
    boxSizing: "border-box",
    display: "block",
    width: "initial",
    height: "initial",
    background: "none",
    opacity: 1,
    border: 0,
    margin: 0,
    padding: 0,
  };
  let hasSizer = false;
  let sizerSvg;
  const imgStyle = {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    boxSizing: "border-box",
    padding: 0,
    border: "none",
    margin: "auto",
    display: "block",
    width: 0,
    height: 0,
    minWidth: "100%",
    maxWidth: "100%",
    minHeight: "100%",
    maxHeight: "100%",
    objectFit,
    objectPosition,
  };
  const blurStyle =
    placeholder === "blur"
      ? {
          filter: "blur(20px)",
          backgroundSize: objectFit || "cover",
          backgroundImage: `url("${blurDataURL}")`,
          backgroundPosition: objectPosition || "0% 0%",
        }
      : {};
  if (layout === "fill") {
    // <Image src="i.png" layout="fill" />
    wrapperStyle.display = "block";
    wrapperStyle.position = "absolute";
    wrapperStyle.top = 0;
    wrapperStyle.left = 0;
    wrapperStyle.bottom = 0;
    wrapperStyle.right = 0;
  } else if (
    typeof widthInt !== "undefined" &&
    typeof heightInt !== "undefined"
  ) {
    // <Image src="i.png" width="100" height="100" />
    const quotient = heightInt / widthInt;
    const paddingTop = isNaN(quotient) ? "100%" : `${quotient * 100}%`;
    if (layout === "responsive") {
      // <Image src="i.png" width="100" height="100" layout="responsive" />
      wrapperStyle.display = "block";
      wrapperStyle.position = "relative";
      hasSizer = true;
      sizerStyle.paddingTop = paddingTop;
    } else if (layout === "intrinsic") {
      // <Image src="i.png" width="100" height="100" layout="intrinsic" />
      wrapperStyle.display = "inline-block";
      wrapperStyle.position = "relative";
      wrapperStyle.maxWidth = "100%";
      hasSizer = true;
      sizerStyle.maxWidth = "100%";
      sizerSvg = `<svg width="${widthInt}" height="${heightInt}" xmlns="http://www.w3.org/2000/svg" version="1.1"/>`;
    } else if (layout === "fixed") {
      // <Image src="i.png" width="100" height="100" layout="fixed" />
      wrapperStyle.display = "inline-block";
      wrapperStyle.position = "relative";
      wrapperStyle.width = widthInt;
      wrapperStyle.height = heightInt;
    }
  } else {
    // <Image src="i.png" />
    if (process.env.NODE_ENV !== "production") {
      throw new Error(
        `Image with src "${src}" must use "width" and "height" properties or "layout='fill'" property.`
      );
    }
  }
  let imgAttributes = {
    src: emptyDataURL,
    srcSet: undefined,
    sizes: undefined,
  };
  if (isVisible) {
    imgAttributes = generateImgAttrs({
      src,
      unoptimized,
      layout,
      width: widthInt,
      quality: qualityInt,
      sizes,
      loader,
    });
  }
  let srcString = src;
  if (process.env.NODE_ENV !== "production") {
    if (typeof window !== "undefined") {
      let fullUrl;
      try {
        fullUrl = new URL(imgAttributes.src);
      } catch (e) {
        fullUrl = new URL(imgAttributes.src, window.location.href);
      }
      allImgs.set(fullUrl.href, {
        src,
        priority,
        placeholder,
      });
    }
  }
  return /*#__PURE__*/ _react.default.createElement(
    "span",
    {
      style: wrapperStyle,
    },
    hasSizer
      ? /*#__PURE__*/ _react.default.createElement(
          "span",
          {
            style: sizerStyle,
          },
          sizerSvg
            ? /*#__PURE__*/ _react.default.createElement("img", {
                style: {
                  display: "block",
                  maxWidth: "100%",
                  width: "initial",
                  height: "initial",
                  background: "none",
                  opacity: 1,
                  border: 0,
                  margin: 0,
                  padding: 0,
                },
                alt: "",
                "aria-hidden": true,
                src: `data:image/svg+xml;base64,${(0, _toBase64).toBase64(
                  sizerSvg
                )}`,
              })
            : null
        )
      : null,
    /*#__PURE__*/ _react.default.createElement(
      "img",
      Object.assign({}, rest, imgAttributes, {
        decoding: "async",
        "data-nimg": layout,
        className: className,
        ref: (img) => {
          setRef(img);
          handleLoading(img, srcString, layout, placeholder, onLoadingComplete);
        },
        style: _objectSpread({}, imgStyle, blurStyle),
      })
    ),
    /*#__PURE__*/ _react.default.createElement(
      "noscript",
      null,
      /*#__PURE__*/ _react.default.createElement(
        "img",
        Object.assign(
          {},
          rest,
          generateImgAttrs({
            src,
            unoptimized,
            layout,
            width: widthInt,
            quality: qualityInt,
            sizes,
            loader,
          }),
          {
            decoding: "async",
            "data-nimg": layout,
            style: imgStyle,
            className: className,
            // @ts-ignore - TODO: upgrade to `@types/react@17`
            loading: loading || "lazy",
          }
        )
      )
    ),
    priority // Note how we omit the `href` attribute, as it would only be relevant
      ? // for browsers that do not support `imagesrcset`, and in those cases
        // it would likely cause the incorrect image to be preloaded.
        //
        // https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset
        /*#__PURE__*/ _react.default.createElement(
          _head.default,
          null,
          /*#__PURE__*/ _react.default.createElement("link", {
            key:
              "__nimg-" +
              imgAttributes.src +
              imgAttributes.srcSet +
              imgAttributes.sizes,
            rel: "preload",
            as: "image",
            href: imgAttributes.srcSet ? undefined : imgAttributes.src,
            // @ts-ignore: imagesrcset is not yet in the link element type.
            imagesrcset: imgAttributes.srcSet,
            // @ts-ignore: imagesizes is not yet in the link element type.
            imagesizes: imgAttributes.sizes,
          })
        )
      : null
  );
}
function normalizeSrc(src) {
  return src[0] === "/" ? src.slice(1) : src;
}
function imgixLoader({ root, src, width, quality }) {
  // Demo: https://static.imgix.net/daisy.png?auto=format&fit=max&w=300
  const url = new URL(`${root}${normalizeSrc(src)}`);
  const params = url.searchParams;
  params.set("auto", params.get("auto") || "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;
}
function akamaiLoader({ root, src, width }) {
  return `${root}${normalizeSrc(src)}?imwidth=${width}`;
}
function cloudinaryLoader({ root, src, width, quality }) {
  // Demo: https://res.cloudinary.com/demo/image/upload/w_300,c_limit,q_auto/turtles.jpg
  const params = [
    "f_auto",
    "c_limit",
    "w_" + width,
    "q_" + (quality || "auto"),
  ];
  const paramsString = params.join(",") + "/";
  return `${root}${paramsString}${normalizeSrc(src)}`;
}
function customLoader({ src }) {
  throw new Error(
    `Image with src "${src}" is missing "loader" prop.` +
      `\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader`
  );
}
function defaultLoader({ root, src, width, quality }) {
  if (process.env.NODE_ENV !== "production") {
    const missingValues = [];
    // these should always be provided but make sure they are
    if (!src) missingValues.push("src");
    if (!width) missingValues.push("width");
    if (missingValues.length > 0) {
      throw new Error(
        `Next Image Optimization requires ${missingValues.join(
          ", "
        )} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify(
          {
            src,
            width,
            quality,
          }
        )}`
      );
    }
    if (src.startsWith("//")) {
      throw new Error(
        `Failed to parse src "${src}" on \`next/image\`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)`
      );
    }
    if (!src.startsWith("/") && configDomains) {
      let parsedSrc;
      try {
        parsedSrc = new URL(src);
      } catch (err) {
        console.error(err);
        throw new Error(
          `Failed to parse src "${src}" on \`next/image\`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)`
        );
      }
      if (
        process.env.NODE_ENV !== "test" &&
        !configDomains.includes(parsedSrc.hostname)
      ) {
        throw new Error(
          `Invalid src prop (${src}) on \`next/image\`, hostname "${parsedSrc.hostname}" is not configured under images in your \`next.config.js\`\n` +
            `See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host`
        );
      }
    }
  }
  return `${root}?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;
}

//# sourceMappingURL=image.js.map