I got an invalid image when I fetch it. Why that problem?

Question

I try the api using the postman and it is ok. the problem is when I try to fetch the image file to be displayed in the front, it becomes invalid image. Do everything but not show the image

function App() {
 
    const [singleFile, setSingleFile] = useState([]);
    const [multipleFile, setMultipleFile] = useState([]);

const getSingleFile = async () => {
    try {
      const {data} = await axios.get("users/getSingleFile");
      return data;
    } catch (error) {
      throw error;
    }
  }

  const getSingleFileList = async () => {
    try {
        const filelist = await getSingleFile();
        setSingleFile(filelist);
    } catch (error) {
        console.log(error);
    }
  }

  useEffect(() => {
        getSingleFileList();

  }, []);


    return ( 

        <div>
            <div>
                <Fotos getSingle={() => getSingleFileList} />
            </div>

            {singleFile.map((file, index)=>
                <img src={ "http://localhost:5000/${file.filePath}"} alt="img"/>
                )}

        </div>
        )

};

export default App;

Answer 1

Change this, replace '' by ``:

<img src={ `http://localhost:5000/${file.filePath}`} alt="img"/>