diff --git a/ui/console-src/modules/contents/attachments/components/AttachmentSingleThumbnailItem.vue b/ui/console-src/modules/contents/attachments/components/AttachmentSingleThumbnailItem.vue
index e8e3ef669..1056b635f 100644
--- a/ui/console-src/modules/contents/attachments/components/AttachmentSingleThumbnailItem.vue
+++ b/ui/console-src/modules/contents/attachments/components/AttachmentSingleThumbnailItem.vue
@@ -17,7 +17,6 @@ const { size, permalink } = withDefaults(
       <a :href="permalink" target="_blank" class="block flex-none">
         <img
           :src="permalink"
-          alt=""
           class="h-10 w-10 rounded-md object-cover"
           loading="lazy"
         />
@@ -29,7 +28,7 @@ const { size, permalink } = withDefaults(
         <a
           :href="permalink"
           target="_blank"
-          class="line-clamp-1 hover:text-gray-600"
+          class="line-clamp-3 break-all hover:text-gray-600"
         >
           {{ permalink }}
         </a>
diff --git a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
index cb2ce45b5..5e828c365 100644
--- a/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
+++ b/ui/console-src/modules/contents/pages/DeletedSinglePageList.vue
@@ -4,7 +4,11 @@ import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
 import { generateThumbnailUrl } from "@/utils/thumbnail";
 import type { ListedSinglePage, SinglePage } from "@halo-dev/api-client";
-import { consoleApiClient, coreApiClient } from "@halo-dev/api-client";
+import {
+  consoleApiClient,
+  coreApiClient,
+  GetThumbnailByUriSizeEnum,
+} from "@halo-dev/api-client";
 import {
   Dialog,
   IconAddCircle,
@@ -315,7 +319,10 @@ watch(
                     <img
                       class="h-full w-full object-cover"
                       :src="
-                        generateThumbnailUrl(singlePage.page.spec.cover, 's')
+                        generateThumbnailUrl(
+                          singlePage.page.spec.cover,
+                          GetThumbnailByUriSizeEnum.S
+                        )
                       "
                     />
                   </div>
diff --git a/ui/console-src/modules/contents/pages/components/entity-fields/CoverField.vue b/ui/console-src/modules/contents/pages/components/entity-fields/CoverField.vue
index 81a47065b..23fe00e3e 100644
--- a/ui/console-src/modules/contents/pages/components/entity-fields/CoverField.vue
+++ b/ui/console-src/modules/contents/pages/components/entity-fields/CoverField.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { generateThumbnailUrl } from "@/utils/thumbnail";
-import type { ListedSinglePage } from "@halo-dev/api-client";
+import {
+  GetThumbnailByUriSizeEnum,
+  type ListedSinglePage,
+} from "@halo-dev/api-client";
 import { VEntityField } from "@halo-dev/components";
 
 withDefaults(
@@ -17,7 +20,12 @@ withDefaults(
       <div class="aspect-h-2 aspect-w-3 w-20 overflow-hidden rounded-md">
         <img
           class="h-full w-full object-cover"
-          :src="generateThumbnailUrl(singlePage.page.spec.cover, 's')"
+          :src="
+            generateThumbnailUrl(
+              singlePage.page.spec.cover,
+              GetThumbnailByUriSizeEnum.S
+            )
+          "
         />
       </div>
     </template>
diff --git a/ui/console-src/modules/contents/posts/DeletedPostList.vue b/ui/console-src/modules/contents/posts/DeletedPostList.vue
index c086b82fb..03c22eb7d 100644
--- a/ui/console-src/modules/contents/posts/DeletedPostList.vue
+++ b/ui/console-src/modules/contents/posts/DeletedPostList.vue
@@ -4,7 +4,11 @@ import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
 import { generateThumbnailUrl } from "@/utils/thumbnail";
 import type { ListedPost, Post } from "@halo-dev/api-client";
-import { consoleApiClient, coreApiClient } from "@halo-dev/api-client";
+import {
+  consoleApiClient,
+  coreApiClient,
+  GetThumbnailByUriSizeEnum,
+} from "@halo-dev/api-client";
 import {
   Dialog,
   IconAddCircle,
@@ -325,7 +329,12 @@ watch(
                   >
                     <img
                       class="h-full w-full object-cover"
-                      :src="generateThumbnailUrl(post.post.spec.cover, 's')"
+                      :src="
+                        generateThumbnailUrl(
+                          post.post.spec.cover,
+                          GetThumbnailByUriSizeEnum.S
+                        )
+                      "
                     />
                   </div>
                 </template>
diff --git a/ui/console-src/modules/contents/posts/components/entity-fields/CoverField.vue b/ui/console-src/modules/contents/posts/components/entity-fields/CoverField.vue
index 42c26f2d4..24b029d8c 100644
--- a/ui/console-src/modules/contents/posts/components/entity-fields/CoverField.vue
+++ b/ui/console-src/modules/contents/posts/components/entity-fields/CoverField.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { generateThumbnailUrl } from "@/utils/thumbnail";
-import type { ListedPost } from "@halo-dev/api-client";
+import {
+  GetThumbnailByUriSizeEnum,
+  type ListedPost,
+} from "@halo-dev/api-client";
 import { VEntityField } from "@halo-dev/components";
 
 withDefaults(
@@ -17,7 +20,12 @@ withDefaults(
       <div class="aspect-h-2 aspect-w-3 w-20 overflow-hidden rounded-md">
         <img
           class="h-full w-full object-cover"
-          :src="generateThumbnailUrl(post.post.spec.cover, 's')"
+          :src="
+            generateThumbnailUrl(
+              post.post.spec.cover,
+              GetThumbnailByUriSizeEnum.S
+            )
+          "
         />
       </div>
     </template>
diff --git a/ui/src/utils/thumbnail.ts b/ui/src/utils/thumbnail.ts
index 880f70bd8..bcbc17ef0 100644
--- a/ui/src/utils/thumbnail.ts
+++ b/ui/src/utils/thumbnail.ts
@@ -1,4 +1,22 @@
-export function generateThumbnailUrl(url: string, size: string) {
+import type { GetThumbnailByUriSizeEnum } from "@halo-dev/api-client";
+
+const THUMBNAIL_WIDTH_MAP: Record<GetThumbnailByUriSizeEnum, number> = {
+  XL: 1600,
+  L: 1200,
+  M: 800,
+  S: 400,
+};
+
+export function generateThumbnailUrl(
+  url: string,
+  size: GetThumbnailByUriSizeEnum
+) {
+  const { origin } = location;
+
+  if (url.startsWith(origin) || url.startsWith("/")) {
+    return `${url}?width=${THUMBNAIL_WIDTH_MAP[size]}`;
+  }
+
   return `/apis/api.storage.halo.run/v1alpha1/thumbnails/-/via-uri?uri=${encodeURIComponent(
     url
   )}&size=${size}`;
diff --git a/ui/uc-src/modules/contents/posts/components/PostListItem.vue b/ui/uc-src/modules/contents/posts/components/PostListItem.vue
index d55271ead..6393014ca 100644
--- a/ui/uc-src/modules/contents/posts/components/PostListItem.vue
+++ b/ui/uc-src/modules/contents/posts/components/PostListItem.vue
@@ -7,7 +7,7 @@ import { formatDatetime, relativeTimeTo } from "@/utils/date";
 import { generateThumbnailUrl } from "@/utils/thumbnail";
 import PostTag from "@console/modules/contents/posts/tags/components/PostTag.vue";
 import type { ListedPost } from "@halo-dev/api-client";
-import { ucApiClient } from "@halo-dev/api-client";
+import { GetThumbnailByUriSizeEnum, ucApiClient } from "@halo-dev/api-client";
 import {
   Dialog,
   IconExternalLinkLine,
@@ -127,7 +127,12 @@ function handleDelete() {
           <div class="aspect-h-2 aspect-w-3 w-20 overflow-hidden rounded-md">
             <img
               class="h-full w-full object-cover"
-              :src="generateThumbnailUrl(post.post.spec.cover, 's')"
+              :src="
+                generateThumbnailUrl(
+                  post.post.spec.cover,
+                  GetThumbnailByUriSizeEnum.S
+                )
+              "
             />
           </div>
         </template>