feat(editor): improve status display in image block (#12194)

Closes: [BS-3451](https://linear.app/affine-design/issue/BS-3451/image-block-status-组件)

blocksuite/affine/blocks/image/src/components/page-image-block.ts

@@ -51,6 +51,12 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
       background: ${unsafeCSSVarV2('loading/backgroundLayer')};
     }
 
+    affine-page-image .affine-image-status {
+      position: absolute;
+      left: 18px;
+      bottom: 18px;
+    }
+
     affine-page-image .resizable-img {
       position: relative;
       max-width: 100%;
@@ -354,7 +360,7 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
       ? ImageSelectedRect(this._doc.readonly)
       : null;
 
-    const { loading, icon } = this.state;
+    const { loading, error, icon, description } = this.state;
 
     return html`
       <div class="resizable-img" style=${styleMap(imageSize)}>
@@ -371,6 +377,15 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
       </div>
 
       ${when(loading, () => html`<div class="loading">${icon}</div>`)}
+      ${when(
+        error && description,
+        () =>
+          html`<affine-resource-status
+            class="affine-image-status"
+            .message=${description}
+            .reload=${() => this.block.refreshData()}
+          ></affine-resource-status>`
+      )}
     `;
   }
 

blocksuite/affine/blocks/image/src/image-edgeless-block.ts

@@ -42,6 +42,12 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
       background: ${unsafeCSSVarV2('loading/backgroundLayer')};
     }
 
+    affine-edgeless-image .affine-image-status {
+      position: absolute;
+      left: 18px;
+      bottom: 18px;
+    }
+
     affine-edgeless-image .resizable-img,
     affine-edgeless-image .resizable-img img {
       width: 100%;
@@ -136,6 +142,15 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent<ImageBlockMod
               resovledState.loading,
               () => html`<div class="loading">${loadingIcon}</div>`
             )}
+            ${when(
+              resovledState.error && resovledState.description,
+              () =>
+                html`<affine-resource-status
+                  class="affine-image-status"
+                  .message=${resovledState.description}
+                  .reload=${() => this.refreshData()}
+                ></affine-resource-status>`
+            )}
           `,
           () =>
             html`<affine-image-fallback-card