@agility/nextjs/AgilityImage.js

Agility CMS support for NextJS 16 and Next Image

"use client";
"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.AgilityImage = void 0;
var react_1 = __importDefault(require("react"));
var image_1 = __importDefault(require("next/image"));
/**
 * A wrapper around the next/image compontent that adds the Agility Image API to the loader.
 * If you are using the app router, this component MUST be used from a client component.
 * Consider using AgilityPic component instead - it give you more control over image output sizes.
 * @param {ImageProps} props
 */
var AgilityImage = function (props) {
    var loader = null;
    if (!props.loader) {
        loader = function (_a) {
            var src = _a.src, width = _a.width, quality = _a.quality;
            var theWidth = width;
            var propWidth = Number(props.width);
            //if the width that was asked for is greater than the image width, max out at the image width
            if (propWidth && width > propWidth)
                theWidth = propWidth;
            var w = theWidth > 0 ? "&w=".concat(theWidth) : "";
            var format = src.toLowerCase().indexOf(".svg") === -1 ? "&format=auto" : "";
            if (src.toLowerCase().endsWith(".svg"))
                return src; // don't format SVGs
            return "".concat(src, "?q=").concat(quality || 60).concat(w).concat(format);
        };
    }
    else {
        loader = props.loader;
    }
    return react_1.default.createElement(image_1.default, __assign({}, props, { loader: loader }));
};
exports.AgilityImage = AgilityImage;