Javascript 如何从express后端服务器获取图像并将其显示到前端?
我正在尝试从express后端获取图像并在前端显示它们。我怎样才能完美地做到这一点 我尝试获取保存在我的后端文件夹“Backup”中的图像,并将它们显示回前端的用户。 我用axios试过了,但仍然得到了无效的图像,而不是正确的图像 下面是我在前端的获取请求Javascript 如何从express后端服务器获取图像并将其显示到前端?,javascript,node.js,reactjs,express,axios,Javascript,Node.js,Reactjs,Express,Axios,我正在尝试从express后端获取图像并在前端显示它们。我怎样才能完美地做到这一点 我尝试获取保存在我的后端文件夹“Backup”中的图像,并将它们显示回前端的用户。 我用axios试过了,但仍然得到了无效的图像,而不是正确的图像 下面是我在前端的获取请求 fetchImages = () => { const imageName = 'garande.png' const url = `http://localhost:5000/fetchImage/${imageNam
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>
}