javascript - How to Fetch and Display an Image from an express backend server to a React js frontend? - Stack Overflow

admin管理员组

文章数量:1312646

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

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" />
        )
    }
}

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.

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

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" />
        )
    }
}

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.

• javascript
• node.js
• reactjs
• express
• axios

Share Improve this question Follow asked Sep 6, 2019 at 23:30 GarandeGarande 19211 gold badge22 silver badges1313 bronze badges 4

• 1 Is your res.data a Blob and are you receiving it? – Tarun Khosla Commented Sep 6, 2019 at 23:37
• Am receiving the blob but it is returning an invalid image of whose size is less than the actual file size – Garande Commented Sep 7, 2019 at 9:20
• Convert your blob to File var file = new File( res.data, { type: "image/jpeg" } ); var imageUrl = URL.createObjectURL(file); Then use this imageUrl <img src={res.data} alt="trial" /> – Tarun Khosla Commented Sep 7, 2019 at 10:11
• @tarunkhosla Thank you so much ..... It works but only needs some simple modification which I can handle..... – Garande Commented Sep 9, 2019 at 14:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

This worked for me:

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

I implemented a similar feature using useState():

If you are able to get the response as blob, try this in 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" />
    )
}

}

You can also use res.download in backend:

res.download(`${fileLocation}`)

You do not need to create an API to access the image. Access your Image directly from the react frontend as follows:

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

Hope this solves your issue.

本文标签：