diff --git a/src/views/mobile/transactions/EditPage.vue b/src/views/mobile/transactions/EditPage.vue
index a89a30c9..3af6c268 100644
--- a/src/views/mobile/transactions/EditPage.vue
+++ b/src/views/mobile/transactions/EditPage.vue
@@ -404,7 +404,11 @@
                                         <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" />
                                     </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>
                             </swiper-slide>
                             <swiper-slide @click="showOpenPictureDialog" v-if="canAddTransactionPicture">
@@ -1430,13 +1434,17 @@ init();
     height: var(--ebk-transaction-picture-size);
 }
 
-.transaction-picture-container,
-.transaction-picture {
+.transaction-pictures .transaction-picture-container {
     width: 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%;
     height: 100%;
     position: absolute;
@@ -1445,18 +1453,18 @@ init();
     border-radius: 8px;
 }
 
-.transaction-picture .picture-control-icon {
+.transaction-pictures .transaction-picture-container .transaction-picture .picture-control-icon {
     z-index: 15;
     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;
     color: rgba(255, 255, 255, 0.8);
     font-size: var(--ebk-transaction-picture-remove-icon-size);
 }
 
-.transaction-picture > img {
+.transaction-pictures .transaction-picture-container .transaction-picture img {
     object-fit: cover;
     position: absolute;
     top: 0;
@@ -1466,7 +1474,7 @@ init();
     border-radius: 8px;
 }
 
-.transaction-picture-add {
+.transaction-pictures .transaction-picture-add {
     width: calc(var(--ebk-transaction-picture-size) - 2px);
     height: calc(var(--ebk-transaction-picture-size) - 4px);
     border: 2px dashed #ccc;