+ 9

How to fetch an image and deliver it.

I have a node js site made up with express. It's just a started a project in which I need to fetch a gif from a URL and display it. The mime-type must be "image/gif". Example URL: https://media.tenor.com/images/e483b4eedc03b276947beb32e9b0e4c6/tenor.gif Please try not to use any third-party libraries. PS. After fetching the image I can't display it.

14th Feb 2021, 9:56 AM
Krish
Krish - avatar
12 Antworten
+ 10
Wixonic Regarding your earlier comment: ---- "The url must be in the same domain (Cross-Origin). Without that, Fetch and XMLHttpRequest doesn't work." ---- I wanted to further clarify, cross origin restrictions wouldn't apply if the request is coming from the NodeJS service. That said, I would also add to your point by stating client side XHR / Fetch APIs can make cross origin requests via CORS if permitted by the target server. Otherwise, a server side request proxy would be the likely option. 😉👌
15th Feb 2021, 4:52 AM
David Carroll
David Carroll - avatar
+ 8
Krish [less active] I might consider using the express response.redirect([URL HERE]) method. You could redirect a request to a route on your server to the external gif url.
15th Feb 2021, 4:46 AM
Mike Perkowski
Mike Perkowski - avatar
+ 5
Krish [less active] I'm confused what you're trying to do here. Are you trying to fetch a gif from an external source on the server side and then serve the gif to a client through a request? If that's the case you could easily just set up your client side code to fetch the image from the external source directly by creating a new image element and setting the source to the external gif. There's no need to fetch the gif on the server side and then send it to the client.
15th Feb 2021, 3:55 AM
Mike Perkowski
Mike Perkowski - avatar
+ 4
axios or node fetch? They aren't builtin though but just wanna know if you are comfortable using them or do you mean only using node js .
14th Feb 2021, 11:05 AM
Abhay
Abhay - avatar
+ 4
Abhay I have tried a lot of ways. As per you said axios. We use it to fetch apis That I can do with http module const http = require("https"); const opt = { host: "www.random-api.com", path: "/" } callback = function(response) { var str = ''; //another chunk of data has been received, so append it to `str` response.on('data', function(chunk) { str += chunk; }); //the whole response has been received, so we just print it out here response.on('end', function() { console.log(str); }); } http.request(opt, callback).end();
14th Feb 2021, 11:18 AM
Krish
Krish - avatar
+ 3
Arnav Kumar [📕Schools📚] please check the question again I have changed it a bit.
14th Feb 2021, 3:25 PM
Krish
Krish - avatar
+ 3
Krish [less active] no, that won't work. Using the url "http://127.0.0.1:8080/gif" will only work locally, basically only on the computer that's running the server. For production you can use "/gif" as the src url as long as your express routes are set up to handle the route "/gif". If you'd like to access the route from another page (a different domain than your server) you'd have to use the full url "http://your-production-domain.com/gif"
15th Feb 2021, 12:44 PM
Mike Perkowski
Mike Perkowski - avatar
14th Feb 2021, 2:55 PM
Arnav Kumar [Less/Not Active]
Arnav Kumar [Less/Not Active] - avatar
+ 2
The url must be in the same domain (Cross-Origin). Without that, Fetch and XMLHttpRequest doesn't work.
14th Feb 2021, 8:08 PM
Wixonic (contact: description)
Wixonic (contact: description) - avatar
+ 2
Mike Perkowski it worked But can I use it for production I mean that if I use <img src="http://127.0.0.1:8080/gif" > I'd would work ?
15th Feb 2021, 5:00 AM
Krish
Krish - avatar
+ 1
Mike Perkowski I am trying to make an api It must be like if we use that link of my api in the img sorce tag it would display the ultimate the gif that I fetched.
15th Feb 2021, 4:34 AM
Krish
Krish - avatar
+ 1
Mike Perkowski I hosted it on herkou https://api-gif.herokuapp.com/gif But in discord it shows the static image and not the gif And my api is focused for that only
15th Feb 2021, 4:37 PM
Krish
Krish - avatar