import { createElement, Fragment } from "react";
import { Component, useField, SugaredField } from "@contember/binding";
import { FieldFallbackView } from "./FieldFallbackView.js";
const ImageFieldView = Component(({
  srcField,
  altField,
  titleField,
  formatUrl,
  fallback,
  fallbackStyle,
  ...imgProps
}) => {
  const srcAccessor = useField(srcField);
  const altAccessor = useField(altField);
  const titleAccessor = useField(titleField);
  if (srcAccessor.value === null) {
    return /* @__PURE__ */ createElement(FieldFallbackView, {
      fallback,
      fallbackStyle
    });
  }
  return /* @__PURE__ */ createElement("img", {
    src: formatUrl ? formatUrl(srcAccessor.value) : srcAccessor.value,
    alt: altAccessor?.value || void 0,
    title: titleAccessor?.value || void 0,
    ...imgProps
  });
}, ({ altField, srcField, titleField, fallback, fallbackStyle }) => /* @__PURE__ */ createElement(Fragment, null, /* @__PURE__ */ createElement(SugaredField, {
  field: srcField
}), altField && /* @__PURE__ */ createElement(SugaredField, {
  field: altField
}), titleField && /* @__PURE__ */ createElement(SugaredField, {
  field: titleField
}), /* @__PURE__ */ createElement(FieldFallbackView, {
  fallback,
  fallbackStyle
})), "ImageFieldView");
export { ImageFieldView };
//# sourceMappingURL=ImageFieldView.js.map
