diff --git a/blocksuite/affine/blocks/image/src/components/page-image-block.ts b/blocksuite/affine/blocks/image/src/components/page-image-block.ts index a3cfdd821e..592fe65946 100644 --- a/blocksuite/affine/blocks/image/src/components/page-image-block.ts +++ b/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`
@@ -371,6 +377,15 @@ export class ImageBlockPageComponent extends WithDisposable(ShadowlessElement) {
${when(loading, () => html`
${icon}
`)} + ${when( + error && description, + () => + html` this.block.refreshData()} + >` + )} `; } diff --git a/blocksuite/affine/blocks/image/src/image-edgeless-block.ts b/blocksuite/affine/blocks/image/src/image-edgeless-block.ts index bd612457c4..3da51550ba 100644 --- a/blocksuite/affine/blocks/image/src/image-edgeless-block.ts +++ b/blocksuite/affine/blocks/image/src/image-edgeless-block.ts @@ -42,6 +42,12 @@ export class ImageEdgelessBlockComponent extends GfxBlockComponent html`
${loadingIcon}
` )} + ${when( + resovledState.error && resovledState.description, + () => + html` this.refreshData()} + >` + )} `, () => html`