Ever needed a remote picture inside your Node project? Maybe for a cache, a thumbnail job, or quick preprocessing. The typical walkthrough walks through two flavors: a disk write and an in-memory buffer, both driven by axios and modern async syntax.
Most developers reach for one of those two patterns, depending on whether they plan to keep the file or use the bytes right away.
Saving straight to disk
The first recipe pulls an image over the network, hands the stream to the filesystem module, and lets Node handle the chunked writes. You feed in the URL and pick where the file lands. The responseType option does the heavy lifting.
Here is a clean version of the snippet that grabs a picture and writes it to a chosen path:
“`javascript
Import * as fs from 'node:fs';
Import axios from 'axios';
Async function saveImageFromUrl(targetUrl, outputPath) {
Const res = await axios({
Url: targetUrl,
Method: 'GET',
ResponseType: 'stream'
});
Const fileWriter = fs.createWriteStream(outputPath);
Res.data.pipe(fileWriter);
Return new Promise((resolve, reject) => {
FileWriter.on('finish', resolve);
FileWriter.on('error', reject);
});
}
“`
By setting `responseType: 'stream'`, axios gives back a readable stream rather than pre-buffering the body. You attach the disk writer to that pipe. The wrapping promise resolves when writing finishes, so the caller can sit inside an async function and `await` cleanly. A try/catch around the call keeps any network blip from taking down the whole process.
Loading into a buffer
Sometimes you don't need a file at all. You will resize, hash, or re-upload the image immediately. That's where a Buffer saves you the disk trip.
“`javascript
Import axios from 'axios';
Async function fetchImageBuffer(targetUrl) {
Const res = await axios({
Url: targetUrl,
Method: 'GET',
ResponseType: 'arraybuffer'
});
Const buf = Buffer.from(res.data, 'binary');
Return buf;
}
“`
Notice the swap to `responseType: 'arraybuffer'`. That shape pairs perfectly with `Buffer.from(…, 'binary')` and hands you raw bytes that image tooling can consume. No temporary file, nothing to clean up afterwards.
Our analysis
Axios shines because it hides the http-versus-https branching. You could do this with the built-in modules, but you would triple the line count for no real win. For most app code that's a fair deal.
The pattern has limits, though. Buffers get expensive fast when payloads grow past a few hundred MB. If your hot path fetches one image per request and then resizes it, that's fine. If it fetches ten, watch your RAM. Stream the big stuff to disk and process in chunks instead.
One more wrinkle: any time a URL can come from user input, validate it. Otherwise attackers can point your server at internal services, the classic SSRF hole. Whitelist hostnames, block private IP ranges, and disable redirects to sketchy destinations. It's a small habit that prevents a big outage.
A practical scenario
Picture a thumbnail microservice. A user pastes a remote link, your handler calls `fetchImageBuffer`, hands the buffer to image processing code for resizing, and uploads the result elsewhere. Nothing touches local storage. Two helpers, one clean pipeline, zero leftover clutter. The same idea works for avatar generators, receipt scrapers, or any flow where a remote image is just a step along the way.
What to watch next
Native fetch in modern Node is the real threat to axios here. For new projects that don't already depend on axios, fetch covers both response shapes without an extra install. For codebases already on axios, don't churn what works. Just keep an eye on it; the standard library keeps catching up, and the dependency you don't add is the dependency you don't have to upgrade.
Key takeaways
- Reach for axios when readability beats minimalism; consider native fetch for new, dependency-light projects.
- Stream to disk for files; use a buffer only when you will process right away.
- Wrap every call in try/catch and sanity-check any URL coming from user input.
Frequently asked questions
Do I really need axios?
No. Built-in http/https work, just with more code. Modern Node also has native fetch.
What about huge files?
Stream them to disk in chunks. Pulling multi-hundred-MB payloads into one buffer will hurt.
Why responseType: 'stream'?
It skips pre-buffering and gives you a readable stream you can pipe elsewhere.
Can I fetch many images at once?
Yes, fire the helpers with Promise.all. Mind memory and outbound connection limits.
Is this safe with random user URLs?
Not by default. Validate hosts and block redirects to private networks to avoid SSRF.
Source: stackabuse.com