axios 如何从Express后端服务器获取图像并显示到React js前端？

rhfm7lfc 于 2022-11-05 发布在 iOS

关注(0)|答案(3)|浏览(212)

我正在尝试从一个express后端获取图像，并在react js前端显示它们。我怎样才能完美地实现这一点呢？
我试过获取保存在名为“Backup”的后端文件夹中的图像，并在react js前端将其显示给用户。我试过使用axios，但仍然得到一个无效的图像，而不是正确的图像。
下面是我在前端的获取请求。

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文件中的内容

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}`)
})

我希望图像会显示在用户页面中。谢谢。

axios

来源：https://stackoverflow.com/questions/57829529/how-to-fetch-and-display-an-image-from-an-express-backend-server-to-a-react-js-f

3条答案

按热度按时间

j2cgzkjk1#

这对我很有效：

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>
}

赞(0）回复(0）举报 2022-11-05

hec6srdp2#

我使用useState（）实现了一个类似的特性：

如果您能够以blob的形式获得响应，请在Frontend中尝试以下操作：*

const [src, setSrc] = useState('');

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

}
您也可以在后端使用res.download：

res.download(`${fileLocation}`)

赞(0）回复(0）举报 2022-11-05

anauzrmj3#

您不需要创建API来访问映像。直接从react frontend访问您的映像，如下所示：

<img src={'https://localhost:5000/Backup/images/garande.png'} alt="" />

希望这能解决你的问题。

赞(0）回复(0）举报 2022-11-05

我来回答

axios 如何从Express后端服务器获取图像并显示到React js前端？

3条答案

相关问题

热门标签

最新问答