mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +00:00
0babdb4fe3
Backport of #10129 to cloud/1.42. Clean cherry-pick. Co-authored-by: Jin Yi <jin12cc@gmail.com> Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: GitHub Action <action@github.com>
56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
<!-- A image with placeholder fallback on error -->
|
|
<template>
|
|
<span v-if="!error" :class="cn('contents', contain && 'relative')">
|
|
<img
|
|
v-if="contain"
|
|
:src="src"
|
|
:data-test="src"
|
|
class="absolute inset-0 object-cover"
|
|
:style="{ 'background-image': `url(${src})` }"
|
|
:alt="alt"
|
|
/>
|
|
<img
|
|
:src="src"
|
|
:class="
|
|
cn(
|
|
'z-1 size-full object-cover object-center',
|
|
contain && 'absolute object-contain backdrop-blur-[10px]',
|
|
classProp
|
|
)
|
|
"
|
|
:alt="alt"
|
|
/>
|
|
</span>
|
|
<div
|
|
v-if="error"
|
|
class="m-8 flex size-full flex-col items-center justify-center"
|
|
>
|
|
<i class="pi pi-image mb-2 text-5xl" />
|
|
<span>{{ $t('g.imageFailedToLoad') }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useImage } from '@vueuse/core'
|
|
import { computed } from 'vue'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const {
|
|
src,
|
|
class: classProp,
|
|
contain = false,
|
|
alt = 'Image content'
|
|
} = defineProps<{
|
|
src: string
|
|
class?:
|
|
| string
|
|
| Record<string, boolean>
|
|
| (string | Record<string, boolean>)[]
|
|
contain?: boolean
|
|
alt?: string
|
|
}>()
|
|
|
|
const { error } = useImage(computed(() => ({ src, alt })))
|
|
</script>
|