如何从Express后端服务器到React JS前端获取和显示图像?

问题描述

我正在尝试从快速后端获取图像并将其显示在react js前端中.我怎样才能完美地做到这一点?

I'm trying to fetch images from an express backend and display them in the react js frontend. How can I achieve this perfectly?

我试图获取保存在名为"Backup"的后端文件夹中的图像，并在react js前端中将它们显示回给用户.我已经使用axios尝试了此操作，但仍然收到无效的图像，而不是正确的图像.

I have tried to fetch the images saved in my backend folder named "Backup" and display them back to the user in the react js frontend.I have tried this using axios but still am getting an invalid image instead of the correct image.

下面是我在前端的提取请求.

Below is my fetch request in the frontend.

fetchImages = () => {
    const imageName = 'garande.png'
    const url = `http://localhost:5000/fetchImage/${imageName}`
    axios.get(url, {responseType: 'blob'})
    .then(res => {
        return(
            <img src={res.data} alt="trial" />
        )
    }
}

这就是我后端的server.js文件中的内容

And this what I have in the server.js file in the backend

app.get('/fetchImage/:file(*)', (req, res) => {
    let file = req.params.file;
    let fileLocation = path.join('../Backup/images/', file);
    //res.send({image: fileLocation});
    res.sendFile(`${fileLocation}`)
})

我希望该图片显示在用户页面中.谢谢.

I expect the Image to show up in the users page.Thanks.

推荐答案

这对我有用:

export async function get(url: string) {
    try {
        const response = await fetch(url, {
            method: 'GET', // *GET, POST, PUT, DELETE, etc.
            mode: 'cors', // no-cors, *cors, same-origin
            cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
            headers: {
                'Content-Type': 'image/jpeg'
            }
        })
        const blob = await response.blob()
        return [URL.createObjectURL(blob), null];
    }
    catch (error) {
        console.error(`get: error occurred ${error}`);
        return [null, error]
    }
}

function foo(props: any) {
const [screenShot, setScreenshot] = useState(undefined)
const url = props.url
useEffect(() => {
    async function fetchData() {
        // You can await here
        const [response, error] = await get(url)
        if (error)
            log(error)
        else {
            log(`got response ${response}`)
        setScreenshot(response)
        }
    }
    fetchData();
}, [url])

return <div>
    <img src={screenShot} className="Screenshot" alt="showing screen capture" />
</div>
}

这篇关于如何从Express后端服务器到React JS前端获取和显示图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！