From 05d7f7d5f73a8a0a88be8dcd1b7a5132f1da3e2b Mon Sep 17 00:00:00 2001
From: saopig1 <saopig@duck.com>
Date: Mon, 30 Mar 2026 20:04:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=B0=81=E9=9D=A2=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E5=A4=B1=E8=B4=A5=20=E2=80=94=20=E6=B7=BB=E5=8A=A0referrerpoli?=
 =?UTF-8?q?cy=3Dno-referrer=EF=BC=8C=E7=A7=BB=E9=99=A4crossorigin=EF=BC=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0placeholder?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

B站CDN可能基于Referer拒绝图片请求。添加referrerpolicy="no-referrer"
让浏览器不发送Referer头。同时：
- 移除crossorigin="anonymous"避免CORS问题
- alt=""替代alt="Cover"，不再显示文字
- 图片加载失败时显示音符图标placeholder
- watch url变化重置错误状态

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 web/src/components/CoverArt.vue | 50 +++++++++++++++++++++++++++------
 1 file changed, 42 insertions(+), 8 deletions(-)

diff --git a/web/src/components/CoverArt.vue b/web/src/components/CoverArt.vue
index 7963f0c..81118cb 100644
--- a/web/src/components/CoverArt.vue
+++ b/web/src/components/CoverArt.vue
@@ -1,15 +1,21 @@
 <template>
-  <div class="cover-art" :style="{ width: size + 'px', height: size + 'px' }">
+  <div class="cover-art" :style="{ width: size + 'px', height: size + 'px', borderRadius: radius + 'px' }">
     <img
+      v-if="url && !errored"
       :src="url"
-      :alt="alt"
+      alt=""
       class="cover-img"
       :style="{ borderRadius: radius + 'px' }"
+      loading="lazy"
+      referrerpolicy="no-referrer"
       @load="onImageLoad"
-      crossorigin="anonymous"
+      @error="onImageError"
     />
+    <div v-else class="cover-placeholder" :style="{ borderRadius: radius + 'px' }">
+      <svg viewBox="0 0 24 24" class="placeholder-icon"><path fill="currentColor" d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
+    </div>
     <div
-      v-if="showShadow"
+      v-if="showShadow && url && !errored"
       class="cover-shadow"
       :style="{
         backgroundImage: `url(${url})`,
@@ -20,32 +26,43 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   url: string;
   size?: number;
   radius?: number;
-  alt?: string;
   showShadow?: boolean;
 }>(), {
   size: 48,
   radius: 8,
-  alt: 'Cover',
   showShadow: false,
 });
 
 const loaded = ref(false);
+const errored = ref(false);
+
+// Reset error state when URL changes
+watch(() => props.url, () => {
+  errored.value = false;
+  loaded.value = false;
+});
 
 function onImageLoad() {
   loaded.value = true;
 }
+
+function onImageError() {
+  errored.value = true;
+}
 </script>
 
 <style lang="scss" scoped>
 .cover-art {
   position: relative;
   flex-shrink: 0;
+  overflow: hidden;
+  background: var(--bg-card);
 }
 
 .cover-img {
@@ -54,6 +71,23 @@ function onImageLoad() {
   object-fit: cover;
   position: relative;
   z-index: 1;
+  display: block;
+}
+
+.cover-placeholder {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--hover-bg);
+}
+
+.placeholder-icon {
+  width: 40%;
+  height: 40%;
+  color: var(--text-tertiary);
+  opacity: 0.4;
 }
 
 .cover-shadow {