Javascript 如何从express后端服务器获取图像并将其显示到前端？

我正在尝试从express后端获取图像并在前端显示它们。我怎样才能完美地做到这一点

我尝试获取保存在我的后端文件夹“Backup”中的图像，并将它们显示回前端的用户。 我用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" />
        )
    }
}

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

这对我很有用：

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

导出异步函数get（url:string）{ 试一试{ const response=等待获取（url{ 方法：'GET'、//*GET、POST、PUT、DELETE等。 模式：'cors'，//无cors，*cors，同一来源 缓存：“无缓存”，//*默认值，无缓存，重新加载，强制缓存，仅当缓存时 标题：{ “内容类型”：“图像/jpeg” } }) const blob=wait response.blob（） 返回[URL.createObjectURL（blob），null]； } 捕获（错误）{ 错误（`get:error Occessed${error}`）； 返回[空，错误] } } 函数foo（道具：任意）{ 常量[屏幕截图，设置屏幕显示]=useState（未定义） const url=props.url useffect（（）=>{ 异步函数fetchData（）{ //你可以在这里等 常量[响应，错误]=等待获取（url） 如果（错误） 日志（错误） 否则{ 日志（`got response${response}`） 设置筛选（响应） } } fetchData（）； }，[url]） 返回 }

---

你的res.data是一个Blob，你收到了吗？我收到了Blob，但它返回了一个无效图像，其大小小于实际文件大小将Blob转换为file var file=new file（res.data，{type:“image/jpeg”}）；var imageUrl=URL.createObjectURL（文件）；然后使用这个imageUrl@tarunkhosla非常感谢。。。。。它的工作，但只需要一些简单的修改，我可以处理。。。。。

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