Skip to content

How to turn an image into a data URI string

I had an image file on my filesystem and I wanted to put it inside an HTML page using the data-uri format so I could embed it into the page itself.

Here’s how I did it:

const imageData = fs.readFileSync(fileLocation, 'binary')

const src = `data:${contentType};base64,${Buffer.from(
  imageData,
  'binary'
).toString('base64')}`

In my case I just download that image from the Internet, so I retrieved contentType from the response headers:

const contentType = response.headers['content-type']

In the end I was able to use src inside an img tag like this: <img src={src} />


→ Get my Node.js Handbook

I wrote 21 books to help you become a better developer:

  • HTML Handbook
  • Next.js Pages Router Handbook
  • Alpine.js Handbook
  • HTMX Handbook
  • TypeScript Handbook
  • React Handbook
  • SQL Handbook
  • Git Cheat Sheet
  • Laravel Handbook
  • Express Handbook
  • Swift Handbook
  • Go Handbook
  • PHP Handbook
  • Python Handbook
  • Linux Commands Handbook
  • C Handbook
  • JavaScript Handbook
  • Svelte Handbook
  • CSS Handbook
  • Node.js Handbook
  • Vue Handbook
...download them all now!

Related posts that talk about node: