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} />

Lessons in this unit:

0:	Introduction
1:	How to create and save an image with Node.js and Canvas
2:	How to download an image from URL in Node
3:	How to download and save an image using Node.js
4:	How to get an image width and height using Node
5:	▶︎ How to turn an image into a data URI string
6:	How to download an image using Node.js
7:	How to print a canvas to a data URL
8:	Optimize images from a Node.js script
9:	Calling the ImageOptim macOS app from a Node.js script