fix: preview tooltip fallback image

This commit is contained in:
2024-12-23 16:44:42 +01:00
parent 2ec4694bd3
commit 77250e30c7
3 changed files with 10 additions and 10 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

@@ -1,11 +1,7 @@
<template> <template>
<div class="tooltip-content"> <div class="tooltip-content">
<div class="image-box"> <div class="image-box">
<div v-if="imageState == 'loading'" class="loading-info"> <Loading v-if="imageState == 'loading'" class="loading-info" />
{{ $t('vehicle-preview.loading') }}
</div>
<div v-if="imageState == 'error'" class="loading-info">{{ $t('vehicle-preview.error') }}</div>
<img <img
v-if="tooltipStore.type" v-if="tooltipStore.type"
@@ -34,8 +30,11 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { useTooltipStore } from '../../store/tooltipStore'; import { useTooltipStore } from '../../store/tooltipStore';
import { useApiStore } from '../../store/apiStore'; import { useApiStore } from '../../store/apiStore';
import Loading from '../Global/Loading.vue';
export default defineComponent({ export default defineComponent({
components: { Loading },
data() { data() {
return { return {
tooltipStore: useTooltipStore(), tooltipStore: useTooltipStore(),
@@ -60,9 +59,12 @@ export default defineComponent({
}, },
onImageError(e: Event) { onImageError(e: Event) {
if (!e.target || !(e.target instanceof HTMLImageElement) || this.imageState == 'error')
return;
this.imageState = 'error'; this.imageState = 'error';
(e.target as HTMLElement).style.display = 'none'; e.target.src = '/images/no-vehicle-image.png';
} }
}, },
@@ -99,14 +101,13 @@ export default defineComponent({
.image-box { .image-box {
position: relative; position: relative;
min-height: 150px; min-height: 170px;
} }
.loading-info { .loading-info {
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 35%;
font-size: 1.15em;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
File diff suppressed because one or more lines are too long