+ 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.
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. 😉👌
+ 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.
+ 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.
+ 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 .
+ 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();
+ 3
Arnav Kumar [📕Schools📚] please check the question again I have changed it a bit.
+ 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"
+ 2
You can use node-fetch
https://stackabuse.com/making-http-requests-in-node-js-with-node-fetch/
+ 2
The url must be in the same domain (Cross-Origin). Without that, Fetch and XMLHttpRequest doesn't work.
+ 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 ?
+ 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.
+ 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