React页面切换至个人主页时帖子图片无法加载问题求助

我正在开发一个全栈网站，后端采用Node.js+MongoDB，前端使用React.js。当前遇到的问题是：首页可正常加载所有图片及内容，但切换至个人主页时，帖子里的图片无法显示。

• 首页：图片正常展示
• 个人主页：帖子图片缺失

相关组件代码 #

Feed.jsx #

import "./feed.css";
import Post from "../post/Post";
import Share from "../share/Share";
import { useState } from "react";
import { useEffect } from "react";
import axios from 'axios';

export default function Feed({username}) {
  const [posts,setPosts]=useState([]);
  const [texts,setTexts]=useState([]);
  useEffect(()=>{
    const fetchPosts=async ()=>{
      const res=username? 
      await axios.get("posts/profile/"+username):
      await axios.get("posts/timeline/63c29c2fe9a410383d4bcb98");
      setPosts(res.data);
    };
    fetchPosts(); 
  },[]);

  return (
    <div className="feed">
      <div className="feedWrapper">
        
        <Share/>
        {posts.map((p)=>(
          <Post key={p._id} post={p}/>
        
        ))}
      </div>
    </div>
  )
}

Profile.jsx #

import "./profile.css"
import Topbar from "../../components/topbar/Topbar";
import Sidebar from "../../components/sidebar/Sidebar";
import Feed from "../../components/feed/Feed";
import Rightbar from "../../components/rightbar/Rightbar";
import { useEffect } from "react";
import axios from "axios";
import { useState } from "react";
export default function Profile() {
  const [user,setUser]= useState({});
  useEffect(()=>{
    const fetchUser=async ()=>{
      const res=await axios.get(`/users/?username=Bannu`);
      setUser(res.data);
    };
    fetchUser(); 
  },[]);
  return (
    <>
        <Topbar/>
        <div className="profile">
        <Sidebar/>
        <div className="profileRight">
          <div className="profileRightTop">
            <div className="profileCover">
            <img className="profileCoverImg" src={user.coverPicture||"assets/person/noCover.jpeg"} alt="" />
            <img className="profileUserImg"src="assets/person/7.jpeg" alt="" />
            </div>
            <div className="profileInfo">
              <h4 className="profileInfoName">{user.username}</h4>
              <span className="profileInfoDesc">{user.desc}</span>
            </div>
          </div>
          <div className="profileRightBottom">
        <Feed username='Bannu'/>
        <Rightbar user={user}/>
        </div>
        </div>
        </div>
        
        </>
  )
}

Post.jsx #

import "./post.css";
import { MoreVert } from "@material-ui/icons";
import axios from 'axios';
import { useState,useEffect } from "react";
import {format} from 'timeago.js';
import { Link } from "react-router-dom";
export default function Post(post) {

    const [like,setLike]=useState(post.post.likes.length);
    const [isLiked,setIsLiked]=useState(false);
    const [user,setUser]=useState({});
    const likeHandler=()=>{
        setLike(isLiked?like-1:like+1);
        setIsLiked(!isLiked);
    };
    useEffect(()=>{
        const fetchUser=async ()=>{
          const res=await axios.get(`/users?userId=${post.post.userId}`);
          setUser(res.data);
        };
        fetchUser(); 
      },[post.post.userId]);
    
  return (
    <div className="post">
        <div className="postWrapper">
            <div className="postTop">
                <div className="postTopLeft">
                    <Link to={`profile/${user.username}`}>
                    <img className="postProfileImg"src={user.profilePicture||"assets/person/noAvatar.jpeg"} alt="" />
                    </Link>
                   
                  
                <span className="postUsername">{user.username}</span>
                <span className="postDate">{format(post.post.createdAt)}</span>
                </div>
                <div className="postTopRight">
                    <MoreVert/>
                </div>
            </div>
            <div className="postCenter">
                <span className="postText">{post?.desc}</span>
                <img className="postImg" src={post.post.img} alt="" />
            </div>
            <div className="postBottom">
                <div className="postBottomLeft">
                    <img className="likeIcon" src="assets/like.png" onClick={likeHandler} alt="" />
                    <img className="likeIcon"src="assets/heart.jpeg" onClick={likeHandler} alt="" />
                <span className="postLikeCounter">{like} people like it</span>
                </div>
                <div className="postBottomRight">
                    <span className="postCommentText">{post.comment} comments</span>
                </div>
            </div>
        </div>
      
    </div>
  )
}

Share.jsx #

import "./share.css"
import {PermMedia,Label, Room, EmojiEmotions} from '@material-ui/icons'
export default function Share() {
    return (
        <div className="share">
            <div className="shareWrapper">
                <div className="shareTop">
                    <img className="shareProfileImg" src="assets/person/1.png" alt="" />
                    <input type="text"
                        placeholder="What's in your mind?"
                        className="shareInput"
                    />
                </div>
                <hr className="shareHr" />
                <div className="shareBottom">
                    <div className="shareOptions">
                        <div className="shareOption">
                            <PermMedia htmlColor="tomato" className="shareIcon"/>
                            <span className="shareOptionText">Photo or Video</span>
                        </div>
                        <div className="shareOption">
                            <Label htmlColor="blue"className="shareIcon"/>
                            <span className="shareOptionText">Tag</span>
                        </div>
                        <div className="shareOption">
                            <Room htmlColor="green" className="shareIcon"/>
                            <span className="shareOptionText">Location</span>
                        </div>
                        <div className="shareOption">
                            <EmojiEmotions htmlColor="goldenrod" className="shareIcon"/>
                            <span className="shareOptionText">Feeling</span>
                        </div>
                    </div>
                    <button className="shareButton">Share</button>
                </div>

            </div>

        </div>
    )
}

1. 修复Feed组件的请求触发逻辑 #

Feed组件的useEffect依赖数组为空，导致传入username时不会重新请求用户帖子数据。修改Feed.jsx的useEffect：

useEffect(()=>{
    const fetchPosts=async ()=>{
      const res=username? 
      await axios.get("posts/profile/"+username):
      await axios.get("posts/timeline/63c29c2fe9a410383d4bcb98");
      setPosts(res.data);
    };
    fetchPosts(); 
  },[username]); // 添加username到依赖数组

2. 检查帖子图片的路径有效性 #

• 打开浏览器开发者工具，查看个人主页帖子图片的src属性，确认是否为无效路径
• 对比首页和个人主页接口返回的post.img字段，检查后端posts/profile/:username接口返回的图片路径是否完整、正确

3. 统一图片路径格式 #

如果后端返回相对路径，在不同路由下（首页/、个人主页/profile/Bannu）可能出现解析错误，可通过以下方式处理：

• 后端返回包含域名的绝对路径
• 前端拼接基础路径，例如：

<img className="postImg" src={`/${post.post.img}`} alt="" />

4. 验证后端接口数据一致性 #

确保posts/profile/:username接口返回的帖子数据中，img字段与posts/timeline/:userId接口返回的内容一致，无缺失或路径错误。

内容的提问来源于stack exchange，提问作者Robert Downey Jr.