<template>
    <img
        class="prismic-image"
        :alt="alt"
        :width="width"
        :height="height"
        :src="src"
    />
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    field: {
        type: [String, Object],
        required: true,
    },
})

const src = computed(() =>
    typeof props.field == 'string' ? props.field : props.field?.url,
)
const width = computed(() => props.field?.width || '')
const height = computed(() => props.field?.height || '')
const alt = computed(() => props.field?.alt || '')
</script>
