mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-20 09:44:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

show an error message when transaction images fail to load on the transaction details page

Browse Source
This commit is contained in:
MaysWind
2026-05-11 00:39:38 +08:00
parent 563bef69cf
commit e6c6d02112
1 changed files with 16 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/mobile/transactions/EditPage.vue
+16 -8
View File
@@ -404,7 +404,11 @@
<f7-icon class="picture-control-icon picture-remove-icon" f7="trash" v-if="pictureInfo.pictureId !== removingPictureId"></f7-icon> <f7-icon class="picture-control-icon picture-remove-icon" f7="trash" v-if="pictureInfo.pictureId !== removingPictureId"></f7-icon>
<f7-preloader color="white" :size="28" v-if="pictureInfo.pictureId === removingPictureId" /> <f7-preloader color="white" :size="28" v-if="pictureInfo.pictureId === removingPictureId" />
</div> </div>
<img alt="picture" :src="getTransactionPictureUrl(pictureInfo)"/> <image-box style="height: 100%" alt="picture" :src="getTransactionPictureUrl(pictureInfo)">
<template #error>
{{ tt('Failed to load image, please check whether the config "domain" and "root_url" are set correctly.') }}
</template>
</image-box>
</div> </div>
</swiper-slide> </swiper-slide>
<swiper-slide @click="showOpenPictureDialog" v-if="canAddTransactionPicture"> <swiper-slide @click="showOpenPictureDialog" v-if="canAddTransactionPicture">
@@ -1430,13 +1434,17 @@ init();
height: var(--ebk-transaction-picture-size); height: var(--ebk-transaction-picture-size);
} }
.transaction-picture-container, .transaction-pictures .transaction-picture-container {
.transaction-picture {
width: var(--ebk-transaction-picture-size); width: var(--ebk-transaction-picture-size);
height: var(--ebk-transaction-picture-size); height: var(--ebk-transaction-picture-size);
} }
.transaction-picture .transaction-picture-control-backdrop { .transaction-pictures .transaction-picture-container .transaction-picture {
width: 100%;
height: 100%;
}
.transaction-pictures .transaction-picture-container .transaction-picture .transaction-picture-control-backdrop {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: absolute; position: absolute;
@@ -1445,18 +1453,18 @@ init();
border-radius: 8px; border-radius: 8px;
} }
.transaction-picture .picture-control-icon { .transaction-pictures .transaction-picture-container .transaction-picture .picture-control-icon {
z-index: 15; z-index: 15;
font-size: var(--ebk-transaction-picture-add-icon-size); font-size: var(--ebk-transaction-picture-add-icon-size);
} }
.transaction-picture .picture-remove-icon { .transaction-pictures .transaction-picture-container .transaction-picture .picture-remove-icon {
background-color: transparent; background-color: transparent;
color: rgba(255, 255, 255, 0.8); color: rgba(255, 255, 255, 0.8);
font-size: var(--ebk-transaction-picture-remove-icon-size); font-size: var(--ebk-transaction-picture-remove-icon-size);
} }
.transaction-picture > img { .transaction-pictures .transaction-picture-container .transaction-picture img {
object-fit: cover; object-fit: cover;
position: absolute; position: absolute;
top: 0; top: 0;
@@ -1466,7 +1474,7 @@ init();
border-radius: 8px; border-radius: 8px;
} }
.transaction-picture-add { .transaction-pictures .transaction-picture-add {
width: calc(var(--ebk-transaction-picture-size) - 2px); width: calc(var(--ebk-transaction-picture-size) - 2px);
height: calc(var(--ebk-transaction-picture-size) - 4px); height: calc(var(--ebk-transaction-picture-size) - 4px);
border: 2px dashed #ccc; border: 2px dashed #ccc;