chore: proxy image preview in frontend (#11957)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
	- Images and icons in bookmark cards are now loaded through an image proxy for improved reliability and consistency.
	- Embed blocks for GitHub, Loom, and YouTube now display banner and creator images via an image proxy service for enhanced image loading.

- **Refactor**
	- Simplified backend URL handling and proxy logic for images, resulting in more efficient processing and reduced complexity.
	- Consolidated image proxy middleware and services into a shared adapter module for streamlined imports and improved maintainability.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
forehalo
2025-04-24 10:23:25 +00:00
parent eaa1bc6bf1
commit 4ffa37d1c3
30 changed files with 86 additions and 155 deletions

View File

@@ -1,5 +1,6 @@
import { getEmbedCardIcons } from '@blocksuite/affine-block-embed';
import { WebIcon16 } from '@blocksuite/affine-components/icons';
import { ImageProxyService } from '@blocksuite/affine-shared/adapters';
import { ThemeProvider } from '@blocksuite/affine-shared/services';
import { getHostName } from '@blocksuite/affine-shared/utils';
import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
@@ -85,11 +86,12 @@ export class BookmarkCard extends SignalWatcher(
const theme = this.bookmark.std.get(ThemeProvider).theme;
const { LoadingIcon, EmbedCardBannerIcon } = getEmbedCardIcons(theme);
const imageProxyService = this.bookmark.doc.get(ImageProxyService);
const titleIcon = this.loading
? LoadingIcon
: icon
? html`<img src=${icon} alt="icon" />`
? html`<img src=${imageProxyService.buildUrl(icon)} alt="icon" />`
: WebIcon16;
const descriptionText = this.loading
@@ -102,7 +104,7 @@ export class BookmarkCard extends SignalWatcher(
const bannerImage =
!this.loading && image
? html`<img src=${image} alt="banner" />`
? html`<img src=${imageProxyService.buildUrl(image)} alt="banner" />`
: EmbedCardBannerIcon;
return html`