@dnb/eufemia/es/elements/img/Img.js

DNB Eufemia Design System UI Library

import React from 'react';
import E from "../Element.js";
import { applySpacing, removeSpaceProps } from "../../components/space/SpacingUtils.js";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Img = ({
  caption,
  alt,
  element = 'figure',
  skeleton,
  imgClass,
  className,
  loading = 'eager',
  ...p
}) => {
  const [hasError, setError] = React.useState(false);
  return _jsxs(E, {
    as: element,
    internalClass: "dnb-img",
    ...applySpacing(p, {
      className
    }, p.is),
    skeleton: skeleton,
    skeletonMethod: "shape",
    children: [_jsx(E, {
      as: "img",
      loading: loading,
      alt: alt,
      internalClass: 'dnb-img' + (hasError ? " dnb-img--error" : ""),
      className: imgClass,
      skeleton: skeleton,
      onError: () => setError(true),
      ...removeSpaceProps(p)
    }), caption && _jsx("figcaption", {
      children: caption
    })]
  });
};
withComponentMarkers(Img, {
  _supportsSpacingProps: true
});
export default Img;
//# sourceMappingURL=Img.js.map