how do I get images from another project?

Hello so here´s the question: I´m trying to make a dashboard using react that shows various kind of information which is consumed from an API that I developed. The API runs on localhost:8000 and has a public folder which contains various images which I´m trying to use in the front-end but the problem is that when I specify the src of the img tag I write (for example) "http://127.0.0.1:8000/images/avatars/"+user.avatar but in the console it shows a 404 saying that I cannot get that resource. The question is how can I make it so that I can acceed those images from index (index doesn´t naturally consume the avatars folder so it doesn´t show up in resources tab in the inspector) here´s the code of the react app which contains the image:

import {useEffect, useState} from "react";

import "./Users.css"
function Users(props){
    const [users, setUsers] = useState([]);
    let i = 0;
    useEffect(() => {
        fetch('http://127.0.0.1:8000/api/users').then((res) =>{
            
            return res.json();
        }).then(res => {

            setUsers(res);
        });
    }, []);

    return (
            <div>
                {users.map((user) =>{
                    return(
                    <ul className="ul-user">
                        <li className="li-user" key={i++}><img  width={30} height={30}src={"http://127.0.0.1:8000/images/avatars/1659909830689_img.png"} alt={"avatar"+ i}></img></li>
                        
                        <li className="li-user" key={i++}>{user.firstName}</li>
                        
                        <li className="li-user" key={i++}>{user.lastName}</li>
                        
                    </ul>);})}
            </div>
        );
}


export default Users;