PC端的部分适配

src/screens/message/components/ChatScreen/SegmentRenderer.tsx

@@ -130,9 +130,22 @@ const ImageSegment: React.FC<{
 }> = ({ data, isMe, onImagePress, onImageLongPress }) => {
   const pressPositionRef = useRef({ x: 0, y: 0 });
   const [dimensions, setDimensions] = useState<{ width: number; height: number } | null>(null);
+  const [loadError, setLoadError] = useState(false);
   const imageUrl = data.thumbnail_url || data.url;
   
+  // 如果没有有效的图片URL，显示图片占位符
+  const hasValidUrl = !!imageUrl && imageUrl.trim() !== '';
+  
   useEffect(() => {
+    // 重置状态
+    setLoadError(false);
+    
+    // 如果没有有效的图片URL，设置默认尺寸用于显示占位符
+    if (!hasValidUrl) {
+      setDimensions(IMAGE_FALLBACK_SIZE);
+      return;
+    }
+    
     // 如果已经有宽高信息，直接使用
     if (data.width && data.height) {
       const aspectRatio = data.width / data.height;
@@ -191,7 +204,7 @@ const ImageSegment: React.FC<{
     );
     
     return () => clearTimeout(timeoutId);
-  }, [imageUrl, data.width, data.height]);
+  }, [imageUrl, data.width, data.height, hasValidUrl]);
   
   // 记录按压位置
   const handlePressIn = (event: GestureResponderEvent) => {
@@ -204,6 +217,35 @@ const ImageSegment: React.FC<{
     onImageLongPress?.(pressPositionRef.current);
   };
 
+  // 没有有效URL或加载失败时显示占位符
+  if (!hasValidUrl || loadError) {
+    return (
+      <TouchableOpacity
+        key={`image-${data.url || Math.random()}`}
+        style={[styles.imageContainer, isMe ? styles.imageMe : styles.imageOther]}
+        onPressIn={handlePressIn}
+        onPress={() => hasValidUrl && onImagePress?.(data.url)}
+        onLongPress={handleLongPress}
+        delayLongPress={500}
+        activeOpacity={0.9}
+      >
+        <View
+          style={{
+            width: IMAGE_FALLBACK_SIZE.width,
+            height: IMAGE_FALLBACK_SIZE.height,
+            borderRadius: 8,
+            backgroundColor: 'rgba(0,0,0,0.1)',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          <MaterialCommunityIcons name="image" size={32} color="#999" />
+          <Text style={{ color: '#999', fontSize: 12, marginTop: 4 }}>图片</Text>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+  
   // 初始加载时显示占位
   if (!dimensions) {
     return (
@@ -248,6 +290,9 @@ const ImageSegment: React.FC<{
         contentFit="cover"
         cachePolicy="disk"
         priority="normal"
+        onError={() => {
+          setLoadError(true);
+        }}
       />
     </TouchableOpacity>
   );