feat(image): 封装 expo-image 组件以支持安全的图片请求头

.kilocode/rules/memory-bank/tasks.md

@@ -751,3 +751,44 @@ list: {
 2. **保持翻译一致性**：相同含义的文本使用相同的翻译键
 3. **定期审查**：定期检查是否有硬编码文本遗漏
 4. **测试验证**：在开发完成后测试语言切换功能是否正常
+
+## Expo Image 封装与使用规范
+
+**最后更新**: 2025-12-18
+
+### 重要原则
+
+**禁止直接使用 `expo-image` 的 `Image` 组件**，必须使用封装好的 `@/components/ui/Image` 组件。
+
+### 问题描述
+
+为了满足后端 API 安全要求，所有图片请求都需要携带特定的 `User-Agent` 和 `Referer` 请求头。`expo-image` 默认不会添加这些头信息。
+
+### 解决方案
+
+创建了一个封装组件 `@/components/ui/Image.tsx`，该组件自动拦截 `source` 属性并注入所需的请求头。
+
+### 实现模式
+
+#### 1. 替换导入语句
+
+```typescript
+// ❌ 禁止使用
+import { Image } from "expo-image";
+
+// ✅ 正确写法
+import { Image } from "@/components/ui/Image";
+```
+
+#### 2. 组件功能
+
+封装的组件会自动处理以下逻辑：
+
+1.  **注入 User-Agent**: 使用 `Out Live/{version} (iOS)` 格式
+2.  **注入 Referer**: 使用 `API_ORIGIN` 常量 (`https://pilate.richarjiang.com`)
+3.  **支持多种 Source 类型**: 自动处理 `string` (URL), `object` (带 uri), `number` (本地资源) 以及它们的数组形式
+
+### 参考实现
+
+- `components/ui/Image.tsx`: 核心封装实现
+- `components/WorkoutSummaryCard.tsx`: 使用示例

app/(tabs)/challenges.tsx

@@ -2,6 +2,7 @@ import dayjs from 'dayjs';
 
 import ChallengeProgressCard from '@/components/challenges/ChallengeProgressCard';
 import { ConfirmationSheet } from '@/components/ui/ConfirmationSheet';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
@@ -23,7 +24,6 @@ import {
 import { Toast } from '@/utils/toast.utils';
 import { Ionicons } from '@expo/vector-icons';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useRouter } from 'expo-router';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';

app/(tabs)/medications.tsx

@@ -4,6 +4,7 @@ import { MedicationCard } from '@/components/medication/MedicationCard';
 import { TakenMedicationsStack } from '@/components/medication/TakenMedicationsStack';
 import { ThemedText } from '@/components/ThemedText';
 import { IconSymbol } from '@/components/ui/IconSymbol';
+import { Image } from '@/components/ui/Image';
 import { MedicalDisclaimerSheet } from '@/components/ui/MedicalDisclaimerSheet';
 import { MedicationAiSummaryInfoSheet } from '@/components/ui/MedicationAiSummaryInfoSheet';
 import { Colors } from '@/constants/Colors';
@@ -20,7 +21,6 @@ import { useFocusEffect } from '@react-navigation/native';
 import dayjs, { Dayjs } from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';

app/(tabs)/personal.tsx

@@ -11,6 +11,7 @@ import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
 import { useColorScheme } from '@/hooks/useColorScheme';
 
+import { Image } from '@/components/ui/Image';
 import type { BadgeDto } from '@/services/badges';
 import { reportBadgeShowcaseDisplayed } from '@/services/badges';
 import { updateUser, type UserLanguage } from '@/services/users';
@@ -24,7 +25,6 @@ import { Ionicons } from '@expo/vector-icons';
 import { useFocusEffect } from '@react-navigation/native';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useRouter } from 'expo-router';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';

app/badges/index.tsx

@@ -1,14 +1,14 @@
+import { BadgeShowcaseModal } from '@/components/badges/BadgeShowcaseModal';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import type { BadgeDto } from '@/services/badges';
 import { fetchAvailableBadges, selectBadgesLoading, selectSortedBadges } from '@/store/badgesSlice';
 import { DEFAULT_MEMBER_NAME, selectUserProfile } from '@/store/userSlice';
-import { BadgeShowcaseModal } from '@/components/badges/BadgeShowcaseModal';
 import { Toast } from '@/utils/toast.utils';
 import { Ionicons } from '@expo/vector-icons';
 import { useFocusEffect } from '@react-navigation/native';
 import * as Haptics from 'expo-haptics';
-import { Image } from 'expo-image';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FlatList, Pressable, RefreshControl, StyleSheet, Text, View } from 'react-native';

app/challenges/[id]/index.tsx

@@ -1,6 +1,7 @@
 import ChallengeProgressCard from '@/components/challenges/ChallengeProgressCard';
 import { ChallengeRankingItem } from '@/components/challenges/ChallengeRankingItem';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
@@ -33,7 +34,6 @@ import { BlurView } from 'expo-blur';
 import * as Clipboard from 'expo-clipboard';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
 import * as Haptics from 'expo-haptics';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import LottieView from 'lottie-react-native';

app/challenges/create-custom.tsx

@@ -1,8 +1,8 @@
+import { Image } from '@/components/ui/Image';
 import i18n from '@/i18n';
 import dayjs from 'dayjs';
 import { BlurView } from 'expo-blur';
 import * as Clipboard from 'expo-clipboard';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';

app/coach.tsx

@@ -18,6 +18,7 @@ import {
 import Animated, { FadeInDown, FadeInUp, Layout } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { getTabBarBottomPadding } from '@/constants/TabBar';
 import { useAppSelector } from '@/hooks/redux';
@@ -29,7 +30,6 @@ import { loadAiCoachSessionCache, saveAiCoachSessionCache } from '@/services/aiC
 import { api, getAuthToken, postTextStream } from '@/services/api';
 import { selectLatestMoodRecordByDate } from '@/store/moodSlice';
 import { generateWelcomeMessage, hasRecordedMoodToday } from '@/utils/welcomeMessage';
-import { Image } from 'expo-image';
 import { HistoryModal } from '../components/model/HistoryModal';
 import { ActionSheet } from '../components/ui/ActionSheet';
 

app/food-library.tsx

@@ -1,6 +1,7 @@
 import { CreateCustomFoodModal, type CustomFoodData } from '@/components/model/food/CreateCustomFoodModal';
 import { FoodDetailModal } from '@/components/model/food/FoodDetailModal';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { DEFAULT_IMAGE_FOOD } from '@/constants/Image';
 import { useAppDispatch } from '@/hooks/redux';
@@ -13,7 +14,6 @@ import { fetchDailyNutritionData } from '@/store/nutritionSlice';
 import type { FoodItem, MealType, SelectedFoodItem } from '@/types/food';
 import { saveNutritionToHealthKit } from '@/utils/health';
 import { Ionicons } from '@expo/vector-icons';
-import { Image } from 'expo-image';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import React, { useEffect, useMemo, useState } from 'react';
 import {

app/food/analysis-result.tsx

@@ -1,5 +1,6 @@
 import { CircularRing } from '@/components/CircularRing';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { ROUTES } from '@/constants/Routes';
 import { useAppSelector } from '@/hooks/redux';
@@ -9,7 +10,6 @@ import { addDietRecord, type CreateDietRecordDto, type MealType } from '@/servic
 import { selectFoodRecognitionResult } from '@/store/foodRecognitionSlice';
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import React, { useEffect, useState } from 'react';

app/food/camera.tsx

@@ -1,4 +1,5 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
 import { useColorScheme } from '@/hooks/useColorScheme';
@@ -6,7 +7,6 @@ import { useI18n } from '@/hooks/useI18n';
 import { Ionicons } from '@expo/vector-icons';
 import { CameraType, CameraView, useCameraPermissions } from 'expo-camera';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';

app/food/food-recognition.tsx

@@ -1,4 +1,5 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useMembershipModal } from '@/contexts/MembershipModalContext';
 import { useAppDispatch } from '@/hooks/redux';
@@ -11,7 +12,6 @@ import { recognizeFood } from '@/services/foodRecognition';
 import { saveRecognitionResult, setError, setLoading } from '@/store/foodRecognitionSlice';
 import { Ionicons } from '@expo/vector-icons';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import React, { useEffect, useState } from 'react';

app/food/nutrition-analysis-history.tsx

@@ -1,4 +1,5 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useI18n } from '@/hooks/useI18n';
 import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
@@ -13,7 +14,6 @@ import { triggerLightHaptic } from '@/utils/haptics';
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useRouter } from 'expo-router';
 import React, { useCallback, useEffect, useState } from 'react';

app/food/nutrition-label-analysis.tsx

@@ -1,4 +1,5 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
 import { useCosUpload } from '@/hooks/useCosUpload';
@@ -12,7 +13,6 @@ import { triggerLightHaptic } from '@/utils/haptics';
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useRouter } from 'expo-router';

app/gallery/index.tsx

@@ -1,4 +1,5 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image as ExpoImage } from '@/components/ui/Image';
 import { useMembershipModal } from '@/contexts/MembershipModalContext';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
 import { useVipService } from '@/hooks/useVipService';
@@ -9,7 +10,6 @@ import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
 import * as FileSystem from 'expo-file-system/legacy';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image as ExpoImage } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import * as MediaLibrary from 'expo-media-library';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';

app/health/profile.tsx

@@ -5,6 +5,7 @@ import { HealthHistoryTab } from '@/components/health/tabs/HealthHistoryTab';
 import { MedicalRecordsTab } from '@/components/health/tabs/MedicalRecordsTab';
 import { ConfirmationSheet } from '@/components/ui/ConfirmationSheet';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { ROUTES } from '@/constants/Routes';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
@@ -16,15 +17,14 @@ import {
   joinFamilyGroup,
   selectFamilyGroup,
 } from '@/store/familyHealthSlice';
-import { 
+import {
   fetchHealthHistory,
-  selectHealthHistoryProgress 
+  selectHealthHistoryProgress
 } from '@/store/healthSlice';
 import { DEFAULT_MEMBER_NAME } from '@/store/userSlice';
 import { Toast } from '@/utils/toast.utils';
 import { Ionicons } from '@expo/vector-icons';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Stack, useRouter } from 'expo-router';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';

app/medications/[medicationId].tsx

@@ -2,6 +2,7 @@ import { ExpiryDatePickerModal } from '@/components/medications/ExpiryDatePicker
 import { ThemedText } from '@/components/ThemedText';
 import { ConfirmationSheet } from '@/components/ui/ConfirmationSheet';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import InfoCard from '@/components/ui/InfoCard';
 import { Colors } from '@/constants/Colors';
 import { DOSAGE_UNITS, DOSAGE_VALUES, FORM_OPTIONS } from '@/constants/Medication';
@@ -37,7 +38,6 @@ import { Picker } from '@react-native-picker/picker';
 import Voice from '@react-native-voice/voice';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useLocalSearchParams, useRouter } from 'expo-router';

app/medications/add-medication.tsx

@@ -1,6 +1,7 @@
 import { ThemedText } from '@/components/ThemedText';
 import { HeaderBar } from '@/components/ui/HeaderBar';
 import { IconSymbol } from '@/components/ui/IconSymbol';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { DOSAGE_UNITS, FORM_OPTIONS } from '@/constants/Medication';
 import { useAppDispatch } from '@/hooks/redux';
@@ -15,7 +16,6 @@ import { Picker } from '@react-native-picker/picker';
 import Voice from '@react-native-voice/voice';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';

app/medications/ai-camera.tsx

@@ -1,5 +1,6 @@
 import { MedicationPhotoGuideModal } from '@/components/medications/MedicationPhotoGuideModal';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
 import { useColorScheme } from '@/hooks/useColorScheme';
@@ -10,7 +11,6 @@ import { getItem, setItem } from '@/utils/kvStore';
 import { Ionicons } from '@expo/vector-icons';
 import { CameraView, useCameraPermissions } from 'expo-camera';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';

app/medications/ai-progress.tsx

@@ -1,11 +1,11 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors, palette } from '@/constants/Colors';
 import { useI18n } from '@/hooks/useI18n';
 import { getMedicationRecognitionStatus } from '@/services/medications';
 import { MedicationRecognitionTask } from '@/types/medication';
 import { Ionicons } from '@expo/vector-icons';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router, useLocalSearchParams } from 'expo-router';
 import React, { useEffect, useMemo, useRef, useState } from 'react';

app/medications/manage-medications.tsx

@@ -2,6 +2,7 @@ import { ThemedText } from '@/components/ThemedText';
 import { ConfirmationSheet } from '@/components/ui/ConfirmationSheet';
 import { HeaderBar } from '@/components/ui/HeaderBar';
 import { IconSymbol } from '@/components/ui/IconSymbol';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useColorScheme } from '@/hooks/useColorScheme';
@@ -18,7 +19,6 @@ import type { Medication, MedicationForm } from '@/types/medication';
 import { useFocusEffect } from '@react-navigation/native';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';
 import React, { useCallback, useMemo, useState } from 'react';

app/nutrition/records.tsx

@@ -3,6 +3,7 @@ import { DateSelector } from '@/components/DateSelector';
 import { FloatingFoodOverlay } from '@/components/FloatingFoodOverlay';
 import { NutritionRecordCard } from '@/components/NutritionRecordCard';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useAuthGuard } from '@/hooks/useAuthGuard';
@@ -27,7 +28,6 @@ import { Ionicons } from '@expo/vector-icons';
 import { useFocusEffect } from '@react-navigation/native';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router } from 'expo-router';
 import React, { useCallback, useEffect, useState } from 'react';

app/profile/edit.tsx

@@ -1,4 +1,5 @@
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useColorScheme } from '@/hooks/useColorScheme';
@@ -13,7 +14,6 @@ import { Ionicons } from '@expo/vector-icons';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import { Picker } from '@react-native-picker/picker';
 import { useFocusEffect } from '@react-navigation/native';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { router } from 'expo-router';
 import React, { useEffect, useMemo, useState } from 'react';

app/sleep-detail.tsx

@@ -2,6 +2,7 @@ import { InfoModal, type SleepDetailData } from '@/components/sleep/InfoModal';
 import { SleepStagesInfoModal } from '@/components/sleep/SleepStagesInfoModal';
 import { SleepStageTimeline } from '@/components/sleep/SleepStageTimeline';
 import { HeaderBar } from '@/components/ui/HeaderBar';
+import { Image } from '@/components/ui/Image';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { useI18n } from '@/hooks/useI18n';
 import {
@@ -14,7 +15,6 @@ import {
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router, useLocalSearchParams } from 'expo-router';
 import React, { useCallback, useEffect, useState } from 'react';

app/water/detail.tsx

@@ -1,10 +1,10 @@
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { useWaterDataByDate } from '@/hooks/useWaterData';
 import { getQuickWaterAmount } from '@/utils/userPreferences';
 import { Ionicons } from '@expo/vector-icons';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { router, useLocalSearchParams } from 'expo-router';
 import React, { useEffect, useState } from 'react';

components/AddWaterModal.tsx

@@ -1,10 +1,10 @@
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { useWaterDataByDate } from '@/hooks/useWaterData';
 import { getQuickWaterAmount, setQuickWaterAmount } from '@/utils/userPreferences';
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
-import { Image } from 'expo-image';
 import React, { useEffect, useState } from 'react';
 import {
   Alert,

components/BasalMetabolismCard.tsx

@@ -1,9 +1,9 @@
+import { Image } from '@/components/ui/Image';
 import { ROUTES } from '@/constants/Routes';
 import { useAppSelector } from '@/hooks/redux';
 import { selectUserAge, selectUserProfile } from '@/store/userSlice';
 import { fetchBasalEnergyBurned } from '@/utils/health';
 import dayjs from 'dayjs';
-import { Image } from 'expo-image';
 import { router } from 'expo-router';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';

components/NutritionRecordCard.tsx

@@ -1,10 +1,10 @@
 import { ThemedText } from '@/components/ThemedText';
+import { Image } from '@/components/ui/Image';
 import { useI18n } from '@/hooks/useI18n';
 import { useThemeColor } from '@/hooks/useThemeColor';
 import { DietRecord } from '@/services/dietRecords';
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
-import { Image } from 'expo-image';
 import React, { useMemo, useRef, useState } from 'react';
 import { Alert, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { RectButton, Swipeable } from 'react-native-gesture-handler';

components/StepsCard.tsx

@@ -1,21 +1,21 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
-    Animated,
-    InteractionManager,
-    StyleSheet,
-    Text,
-    TouchableOpacity,
-    View,
-    ViewStyle
+  Animated,
+  InteractionManager,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+  ViewStyle
 } from 'react-native';
 
+import { Image } from '@/components/ui/Image';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { ChallengeType } from '@/services/challengesApi';
 import { reportChallengeProgress, selectChallengeList } from '@/store/challengesSlice';
 import { fetchHourlyStepSamples, fetchStepCount, HourlyStepData } from '@/utils/health';
 import { logger } from '@/utils/logger';
 import dayjs from 'dayjs';
-import { Image } from 'expo-image';
 import { useRouter } from 'expo-router';
 import { useTranslation } from 'react-i18next';
 import { AnimatedNumber } from './AnimatedNumber';

components/StressMeter.tsx

@@ -1,6 +1,6 @@
+import { Image } from '@/components/ui/Image';
 import { fetchHRVWithStatus } from '@/utils/health';
 import { convertHrvToStressIndex } from '@/utils/stress';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';

components/WaterIntakeCard.tsx

@@ -1,10 +1,10 @@
+import { Image } from '@/components/ui/Image';
 import { useWaterDataByDate } from '@/hooks/useWaterData';
 import { appStoreReviewService } from '@/services/appStoreReview';
 import { getQuickWaterAmount } from '@/utils/userPreferences';
 import { useFocusEffect } from '@react-navigation/native';
 import dayjs from 'dayjs';
 import * as Haptics from 'expo-haptics';
-import { Image } from 'expo-image';
 import { useRouter } from 'expo-router';
 import LottieView from 'lottie-react-native';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';

components/WorkoutSummaryCard.tsx

@@ -1,6 +1,6 @@
+import { Image } from '@/components/ui/Image';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
-import { Image } from 'expo-image';
 import { useRouter } from 'expo-router';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';

components/badges/BadgeShowcaseModal.tsx

@@ -1,10 +1,10 @@
+import { Image } from '@/components/ui/Image';
 import { Toast } from '@/utils/toast.utils';
 import { Ionicons } from '@expo/vector-icons';
+import dayjs from 'dayjs';
 import { BlurView } from 'expo-blur';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
-import dayjs from 'dayjs';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Animated, Modal, Platform, Pressable, Share, StyleSheet, Text, View } from 'react-native';

components/challenges/ChallengeRankingItem.tsx

@@ -1,7 +1,7 @@
+import { Image } from '@/components/ui/Image';
 import { useI18n } from '@/hooks/useI18n';
 import type { RankingItem } from '@/store/challengesSlice';
 import { Ionicons } from '@expo/vector-icons';
-import { Image } from 'expo-image';
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 

components/coach/ChatComposer.tsx

@@ -1,8 +1,8 @@
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { Ionicons } from '@expo/vector-icons';
 import { BlurView } from 'expo-blur';
-import { Image } from 'expo-image';
 import React from 'react';
 import { ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import QuickChips from './QuickChips';

components/coach/ChatMessage.tsx

@@ -1,7 +1,7 @@
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
 import { Ionicons } from '@expo/vector-icons';
-import { Image } from 'expo-image';
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import Markdown from 'react-native-markdown-display';

components/health/MedicalRecordCard.tsx

@@ -1,8 +1,8 @@
-import { Colors, palette } from '@/constants/Colors';
+import { Image } from '@/components/ui/Image';
+import { palette } from '@/constants/Colors';
 import { MedicalRecordItem } from '@/services/healthProfile';
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
-import { Image } from 'expo-image';
 import React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 

components/health/tabs/MedicalRecordsTab.tsx

@@ -1,4 +1,5 @@
 import { MedicalRecordCard } from '@/components/health/MedicalRecordCard';
+import { Image } from '@/components/ui/Image';
 import { palette } from '@/constants/Colors';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { useCosUpload } from '@/hooks/useCosUpload';
@@ -13,7 +14,6 @@ import {
 import { Ionicons } from '@expo/vector-icons';
 import dayjs from 'dayjs';
 import * as DocumentPicker from 'expo-document-picker';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { LinearGradient } from 'expo-linear-gradient';
 import React, { useEffect, useState } from 'react';

components/medication/MedicationAddOptionsSheet.tsx

@@ -1,5 +1,5 @@
+import { Image } from '@/components/ui/Image';
 import { Ionicons } from '@expo/vector-icons';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import React, { useEffect, useRef, useState } from 'react';
 import { Animated, Modal, Pressable, StyleSheet, Text, TouchableOpacity, View } from 'react-native';

components/medication/MedicationCard.tsx

@@ -1,4 +1,5 @@
 import { ThemedText } from '@/components/ThemedText';
+import { Image } from '@/components/ui/Image';
 import { useAppDispatch } from '@/hooks/redux';
 import { useI18n } from '@/hooks/useI18n';
 import { skipMedicationAction, takeMedicationAction } from '@/store/medicationsSlice';
@@ -6,7 +7,6 @@ import type { MedicationDisplayItem } from '@/types/medication';
 import { Ionicons } from '@expo/vector-icons';
 import dayjs, { Dayjs } from 'dayjs';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import React, { useEffect, useState } from 'react';
 import { Alert, StyleSheet, TouchableOpacity, View } from 'react-native';
 

components/medications/MedicationPhotoGuideModal.tsx

@@ -1,7 +1,7 @@
+import { Image } from '@/components/ui/Image';
 import { useI18n } from '@/hooks/useI18n';
 import { Ionicons } from '@expo/vector-icons';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import React from 'react';
 import {

components/model/food/CreateCustomFoodModal.tsx

@@ -1,9 +1,9 @@
+import { Image } from '@/components/ui/Image';
 import { useAppSelector } from '@/hooks/redux';
 import { useCosUpload } from '@/hooks/useCosUpload';
 import { useI18n } from '@/hooks/useI18n';
 import { Ionicons } from '@expo/vector-icons';
 import { BlurView } from 'expo-blur';
-import { Image } from 'expo-image';
 import * as ImagePicker from 'expo-image-picker';
 import { LinearGradient } from 'expo-linear-gradient';
 import React, { useEffect, useMemo, useState } from 'react';

components/model/food/FoodDetailModal.tsx

@@ -15,10 +15,10 @@ import {
   View,
 } from 'react-native';
 // 导入统一的食物类型定义
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { DEFAULT_IMAGE_FOOD } from '@/constants/Image';
 import type { FoodItem } from '@/types/food';
-import { Image } from 'expo-image';
 
 // 导入统一的食物类型定义
 

components/statistic/HealthDataCard.tsx

@@ -1,4 +1,4 @@
-import { Image } from 'expo-image';
+import { Image } from '@/components/ui/Image';
 import React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';

components/statistic/SleepCard.tsx

@@ -1,10 +1,10 @@
+import { Image } from '@/components/ui/Image';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
 import { ChallengeType } from '@/services/challengesApi';
 import { reportChallengeProgress, selectChallengeList } from '@/store/challengesSlice';
 import { logger } from '@/utils/logger';
 import { fetchCompleteSleepData, formatSleepTime } from '@/utils/sleepHealthKit';
 import dayjs from 'dayjs';
-import { Image } from 'expo-image';
 import { router } from 'expo-router';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';

components/ui/Image.tsx

@@ -0,0 +1,44 @@
+import { API_ORIGIN } from '@/constants/Api';
+import Constants from 'expo-constants';
+import { Image as ExpoImage, ImageProps as ExpoImageProps } from 'expo-image';
+import React, { forwardRef, useMemo } from 'react';
+
+// Construct User-Agent
+const APP_NAME = Constants.expoConfig?.name || 'Out Live';
+const APP_VERSION = Constants.expoConfig?.version || '1.1.5';
+const USER_AGENT = `${APP_NAME}/${APP_VERSION} (iOS)`;
+
+export type ImageProps = ExpoImageProps;
+
+export const Image = forwardRef<ExpoImage, ImageProps>(({ source, ...props }, ref) => {
+  const finalSource = useMemo(() => {
+    if (!source) return source;
+
+    const headers = {
+      'User-Agent': USER_AGENT,
+      'Referer': API_ORIGIN,
+    };
+
+    const addHeaders = (src: any) => {
+      if (typeof src === 'number' || src === null || src === undefined) return src;
+      if (typeof src === 'string') return { uri: src, headers };
+      if (typeof src === 'object' && 'uri' in src) {
+        return {
+           ...src,
+           headers: { ...headers, ...(src.headers || {}) }
+        };
+      }
+      return src;
+    };
+
+    if (Array.isArray(source)) {
+      return source.map(addHeaders);
+    }
+    
+    return addHeaders(source);
+  }, [source]);
+
+  return <ExpoImage {...props} source={finalSource} ref={ref} />;
+});
+
+Image.displayName = 'Image';

components/ui/MedicationAiSummaryInfoSheet.tsx

@@ -1,7 +1,7 @@
+import { Image } from '@/components/ui/Image';
 import { Ionicons } from '@expo/vector-icons';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
 import * as Haptics from 'expo-haptics';
-import { Image } from 'expo-image';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   ActivityIndicator,

components/weight/WeightHistoryCard.tsx

@@ -1,3 +1,4 @@
+import { Image } from '@/components/ui/Image';
 import { Colors } from '@/constants/Colors';
 import { ROUTES } from '@/constants/Routes';
 import { useAppDispatch, useAppSelector } from '@/hooks/redux';
@@ -7,7 +8,6 @@ import { fetchWeightHistory } from '@/store/userSlice';
 import { BMI_CATEGORIES } from '@/utils/bmi';
 import { Ionicons } from '@expo/vector-icons';
 import { GlassView, isLiquidGlassAvailable } from 'expo-glass-effect';
-import { Image } from 'expo-image';
 import { LinearGradient } from 'expo-linear-gradient';
 import { useRouter } from 'expo-router';
 import React, { useEffect, useState } from 'react';