React/TypeScript从API获取图片问题：仅显示图标未加载

1. 修复组件DOM结构错误 #

你的组件里直接返回了<body>标签，这不符合React组件规范——React组件是页面的一部分，页面的<body>已经由根入口文件（比如index.html）提供，嵌套<body>会导致DOM结构异常，可能间接影响资源加载。

修改组件代码，移除<body>标签：

import React, { FC } from "react";
import { IUser } from "../types/Types";

interface UserItemProps {
 user: IUser;
}
const UserItem: FC<UserItemProps> = ({ user }) => {
 return (
   <article className="UserPage">
     <h2 className="Title_options ">
       {user.title} 
       <h6 className="Name">{user.name}</h6>
       <h6>{user.address}</h6>
     </h2>
     <img src={user.pictures} alt={user.name} /> {/* 建议加上alt属性，提升可访问性 */}
   </article>
  );
};

export default UserItem;

（另外，你导入的App组件未使用，可以直接删除这条导入语句）

2. 处理图片路径问题 #

从API返回截图推测，pictures字段的值是相对路径（比如/uploads/avatar-1.png），而非完整的HTTP/HTTPS URL。浏览器无法识别相对路径对应的服务器地址，导致图片请求失败。

解决方法：拼接API的基础域名到图片路径前。
先定义API基础地址（可放在项目配置文件或组件内）：

// 替换为你的实际API基础域名
const API_BASE_URL = "https://your-api-domain.com";

再修改img的src属性：

<img 
  src={`${API_BASE_URL}${user.pictures}`} 
  alt={user.name} 
/>

3. 验证图片请求状态 #

打开Chrome开发者工具（F12），切换到Network面板，刷新页面查看图片请求状态：

• 若为404：说明路径拼接错误，检查API基础域名和user.pictures的值是否正确
• 若为CORS错误：需要后端配置跨域允许，或前端通过代理转发请求
• 若为200但图片不显示：检查图片文件是否损坏，或user.pictures是否为正确格式（比如base64字符串需包含data:image/png;base64,前缀）

内容的提问来源于stack exchange，提问作者Michael Hamar