import { defineComponent, ref, onMounted, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot } from 'vue';

var script = defineComponent({
    name: "TsImageLoader",
    props: {
        photoUrl: {
            type: String,
            required: true,
        },
        customClass: {
            type: String,
            default: "",
        },
        customStyle: {
            type: String,
            default: "",
        },
    },
    setup(props) {
        const image = ref("");
        const imageUrl = ref("");
        const setImage = () => {
            imageUrl.value = props.photoUrl || "";
            const highResImage = new Image();
            highResImage.onload = function () {
                image.value = imageUrl.value;
            };
            highResImage.src = imageUrl.value;
        };
        onMounted(() => {
            setImage();
        });
        return {
            image,
            imageUrl,
        };
    },
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createElementBlock("div", {
    id: "",
    class: normalizeClass(`${_ctx.customClass} blend-in`),
    style: normalizeStyle([{"background-size":"cover","background-repeat":"no-repeat","background-position":"center"}, ` ${
      _ctx.imageUrl ? `background-image:url(${_ctx.imageUrl});` : ''
    }  ${_ctx.customStyle}`])
  }, [
    renderSlot(_ctx.$slots, "default")
  ], 6 /* CLASS, STYLE */))
}

script.render = render;
script.__file = "src/components/TsImageLoader/index.vue";

export { script as default };
