How to fetch an image and deliver it.

Question

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.

Answer 1

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. 😉👌

Answer 2

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.

Answer 3

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.

Answer 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 .

Answer 5

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();

Answer 6

Arnav Kumar [📕Schools📚] please check the question again I have changed it a bit.

Answer 7

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"

Answer 8

You can use node-fetch

https://stackabuse.com/making-http-requests-in-node-js-with-node-fetch/

Answer 9

The url must be in the same domain (Cross-Origin). Without that, Fetch and XMLHttpRequest doesn't work.

Answer 10

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 ?

Answer 11

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.

Answer 12

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