Img ​

type ImgFetchpriorityVariant = 'hight' | 'low' | 'auto';

type ImgLoadingVariant = 'lazy' | 'eager';

type ImgFitVariant = 'cover' | 'fill' | 'contain' | 'none' | 'scale-down';

type ImgCrossoriginVariant = 'anonymous' | 'use-credentials';

type ImgDecodingVariant = 'sync' | 'async' | 'auto';

type ImgReferrerpolicyVariant =
  | 'no-referrer'
  | 'no-referrer-when-downgrade'
  | 'origin'
  | 'origin-when-cross-origin'
  | 'same-origin'
  | 'strict-origin'
  | 'strict-origin-when-cross-origin'
  | 'unsafe-url';

interface UseImgClassesProps {
  src: string;
  alt?: string;
  width?: string;
  height?: string;
  fit?: ImgFitVariant;
  position?: string;
  draggable?: boolean;
  fetchpriority?: ImgFetchpriorityVariant;
  loading?: ImgLoadingVariant;
  crossorigin?: ImgCrossoriginVariant;
  decoding?: ImgDecodingVariant;
  referrerpolicy?: ImgReferrerpolicyVariant;
  imgClass?: string;
  imgStyle?: Record<string, string>;
  noNativeMenu?: boolean;
  type?: string;
}

type ImgFitVariant = 'cover' | 'fill' | 'contain' | 'none' | 'scale-down';

defineProps({
  fit: {
    type: String as PropType<ImgFitVariant>,
    default: 'cover',
  },
});

defineProps({
  errorMessage: {
    type: String as PropType<string>,
    default: 'Cannot load image',
  },
});