feat(mobile): Add image headers for cross-origin image loading

Enhance image loading across multiple components by:
- Importing `getImageHeaders` utility function
- Adding custom headers to image sources to resolve cross-origin issues
- Improving image rendering with transition and recycling key support

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/mobile/src/components/ui/image/PreviewPageProvider.tsx

@@ -320,7 +320,6 @@ export const PreviewImageProvider = ({ children }: { children: React.ReactNode }
     ],
   }))
 
-  // 更新动画样式
   const modalStyle = useAnimatedStyle(() => ({
     opacity: opacity.value,
   }))

apps/mobile/src/lib/image.ts

@@ -0,0 +1,9 @@
+export const getImageHeaders = (url: string) => {
+  if (url.startsWith("https://cdnfile.sspai.com")) {
+    return {
+      Referer: "https://sspai.com",
+    }
+  }
+
+  return {}
+}

apps/mobile/src/modules/discover/search-tabs/SearchFeed.tsx

@@ -12,6 +12,7 @@ import Animated, { FadeInUp } from "react-native-reanimated"
 import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
 import { apiClient } from "@/src/lib/api-fetch"
+import { getImageHeaders } from "@/src/lib/image"
 import { useSubscriptionByFeedId } from "@/src/store/subscription/hooks"
 
 import { useSearchPageContext } from "../ctx"
@@ -160,7 +161,7 @@ const PreviewItem = ({ entry }: { entry: NonNullable<SearchResultItem["entries"]
       {!!firstMedia && (
         <View className="bg-gray-6 ml-auto size-[52px] shrink-0 overflow-hidden rounded-lg">
           <Image
-            source={firstMedia.url}
+            source={{ uri: firstMedia.url, headers: getImageHeaders(firstMedia.url) }}
             className="size-full rounded-lg"
             contentFit="cover"
             transition={500}

apps/mobile/src/modules/entry-list/templates/EntryGridItem.tsx

@@ -8,6 +8,7 @@ import { ReAnimatedPressable } from "@/src/components/common/AnimatedComponents"
 import { PreviewImage } from "@/src/components/ui/image/PreviewImage"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
 import { CloseCuteReIcon } from "@/src/icons/close_cute_re"
+import { getImageHeaders } from "@/src/lib/image"
 import { useEntry } from "@/src/store/entry/hooks"
 
 import { useSelectedView } from "../../screen/atoms"
@@ -57,7 +58,7 @@ export function EntryGridItem({ id }: { id: string }) {
             }}
           >
             <Image
-              source={{ uri: imageUrl }}
+              source={{ uri: imageUrl, headers: getImageHeaders(imageUrl) }}
               className="w-full"
               style={{
                 aspectRatio,

apps/mobile/src/modules/entry-list/templates/EntryNormalItem.tsx

@@ -8,6 +8,7 @@ import { setWebViewEntry } from "@/src/components/native/webview/EntryContentWeb
 import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
 import { gentleSpringPreset } from "@/src/constants/spring"
+import { getImageHeaders } from "@/src/lib/image"
 import { useEntry } from "@/src/store/entry/hooks"
 import { useFeed } from "@/src/store/feed/hooks"
 
@@ -73,10 +74,15 @@ export function EntryNormalItem({ entryId }: { entryId: string }) {
         </View>
         {image && (
           <Image
-            source={{ uri: image }}
+            source={{
+              uri: image,
+              headers: getImageHeaders(image),
+            }}
             placeholder={{ blurhash }}
             className="bg-system-fill ml-2 size-20 rounded-md"
             contentFit="cover"
+            recyclingKey={image}
+            transition={500}
           />
         )}
       </ItemPressable>

apps/mobile/src/modules/entry-list/templates/EntrySocialItem.tsx

@@ -13,6 +13,7 @@ import { FeedIcon } from "@/src/components/ui/icon/feed-icon"
 import { ItemPressableStyle } from "@/src/components/ui/pressable/enum"
 import { ItemPressable } from "@/src/components/ui/pressable/ItemPressable"
 import { gentleSpringPreset } from "@/src/constants/spring"
+import { getImageHeaders } from "@/src/lib/image"
 import { quickLookImage } from "@/src/lib/native"
 import { useEntry } from "@/src/store/entry/hooks"
 import { useFeed } from "@/src/store/feed/hooks"
@@ -133,11 +134,12 @@ export function EntrySocialItem({ entryId }: { entryId: string }) {
                   }}
                 >
                   <Image
-                    source={{ uri: image.url }}
+                    source={{ uri: image.url, headers: getImageHeaders(image.url) }}
                     transition={500}
                     placeholder={{ blurhash: image.blurhash }}
                     className="bg-system-fill ml-2 size-20 rounded-md"
                     contentFit="cover"
+                    recyclingKey={image.url}
                   />
                 </Pressable>
               )