获取图像时出现无效图像。为什么会出现这个问题？

Question

我用邮递员试了一下api，没问题。问题是当我尝试获取要在前面显示的图像文件时，它变成了无效图像。什么都做但不显示图像

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

改变这个，用``替换''：

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

获取图像时出现无效图像。为什么会出现这个问题？

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

http

fetch

node.js

reactjs

axios