one/dist/esm/platform/ui/Image.mjs

One is a React framework for web, iOS, and Android apps.

import { useEffect } from "react";
import { domStyle } from "../web/DomView.mjs";
import { jsx } from "react/jsx-runtime";

const OBJECT_FIT = {
	cover: "cover",
	contain: "contain",
	center: "none",
	stretch: "fill"
};
function webUri(source) {
	if (typeof source === "number") {
		throw new Error("One.UI.Image on web takes a url or { uri }, not an asset id");
	}
	return typeof source === "string" ? source : source.uri;
}
function Image({ source, resizeMode = "cover", onLoadStart, onLoad, onError, onLoadEnd, style, testID, nativeID, accessibilityLabel, alt }) {
	const uri = webUri(source);
	useEffect(() => {
		onLoadStart?.();
	}, [uri]);
	return /* @__PURE__ */ jsx("img", {
		src: uri,
		alt: alt ?? accessibilityLabel ?? "",
		"data-testid": testID,
		id: nativeID,
		draggable: false,
		style: {
			display: "block",
			objectFit: OBJECT_FIT[resizeMode],
			...domStyle(style)
		},
		onLoad: (event) => {
			const { naturalWidth: width, naturalHeight: height } = event.currentTarget;
			onLoad?.({ nativeEvent: { source: {
				uri,
				width,
				height
			} } });
			onLoadEnd?.();
		},
		onError: () => {
			onError?.({ nativeEvent: { error: `failed to load ${uri}` } });
			onLoadEnd?.();
		}
	});
}

export { Image };
//# sourceMappingURL=Image.mjs.map