Image
Fit
Information
To ensure the 'fit' property is displayed correctly, make sure the container has a fixed size.
Defines how the image fits into the container. Accepts values such as fill, contain, cover, none, *scale-down*.
<script setup lang="ts">
import { NmorphImage } from "@nmorph/nmorph-ui-kit";
import { CatReal } from "~/assets/images";
</script><template>
<div class="image-fit-overview">
<div class="image-fit-overview__wrapper">
<NmorphImage :src="CatReal" fit="contain" />
</div>
<div class="image-fit-overview__wrapper">
<NmorphImage :src="CatReal" fit="fill" />
</div>
<div class="image-fit-overview__wrapper">
<NmorphImage :src="CatReal" fit="cover" />
</div>
</div>
</template>Frame Border
Defines the thickness of the frame.
<script setup lang="ts">
import { NmorphImage } from "@nmorph/nmorph-ui-kit";
import { CatReal } from "~/assets/images";
</script><template>
<div class="image-frame-border-overview">
<NmorphImage
:src="CatReal"
width="180px"
height="180px"
:frame-border="0"
/>
<NmorphImage
:src="CatReal"
width="180px"
height="180px"
:frame-border="2.67"
/>
<NmorphImage
:src="CatReal"
width="180px"
height="180px"
:frame-border="8"
/>
</div>
</template>Loading Slot
Custom loading content displayed while the image is loading.
<script setup lang="ts">
import {
NmorphIcon,
NmorphIconLoader,
NmorphImage,
} from "@nmorph/nmorph-ui-kit";
const imageSrc = ref("https://httpstat.us/200?sleep=300000");
const errorHandler = () => {
imageKey.value += 1;
};
const imageKey = ref(0);
</script><template>
<div class="image-loading-slot-overview">
<NmorphImage
:key="imageKey"
:src="imageSrc"
width="300px"
height="300px"
@error="errorHandler"
/>
<NmorphImage
:key="imageKey"
:src="imageSrc"
width="300px"
height="300px"
@error="errorHandler"
>
<template #loading>
<NmorphIcon size="large" color="var(--nmorph-accent-color)">
<NmorphIconLoader />
</NmorphIcon>
</template>Load Failed Text
Text displayed when the image fails to load.
<script setup lang="ts">
import { NmorphImage } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="image-load-failed-text-overview">
<NmorphImage
src="./error.jpg"
width="300px"
height="300px"
load-failed-text="Custom error text"
/>
<NmorphImage src="./error.jpg" width="300px" height="300px">
<template #error>Load error</template>NmorphImage Api
Attributes
Slots
Events
Translations i18n
Use these keys to configure custom text for languages that the library does not support out of the box.