mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-02 21:08:12 +00:00
fix: preview tooltip fallback image
This commit is contained in:
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
Reference in New Issue
Block a user