using Base64 images in react.js

Question

I am trying to use Base64 encoded images in my react app.

currently I load images from a folder and looks something like this:

<img className="..." src={imageFile}></img>

I want to use base64 encoded images, I think I can do this:

<img className="..." src={"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaH...."}></img>

the problem is that the base64 strings are huge, and for some reason I cant store them in my component. I tried putting them in a txt file and doing:

fs.readFile('image.txt', function(err, data){console.log(data);})

but I get tons of errors, including:

Uncaught TypeError: fs.readFile is not a function

among others.

any ideas how to store base64 strings in a separate file and load them into my component?

Thanks!

You can not read any files in react using fs module, there is one way to do that but its bit debatable — Nisharg Shah
– Nisharg Shah, Commented Feb 28, 2022 at 17:01
do you know a way to store base64 strings in a separate file and then import them? — Nolan Jannotta
– Nolan Jannotta, Commented Feb 28, 2022 at 17:12
This is a very strange way to go about showing images, why not host them on your app server and have a url link to them? — Yftach
– Yftach, Commented Feb 28, 2022 at 17:48
true, I'm trying to deploy to Arweave, and this (I think) the easiest way to include images — Nolan Jannotta
– Nolan Jannotta, Commented Feb 28, 2022 at 17:58

Neyaz Ahmad · Accepted Answer · 2022-02-28 17:21:51Z

2

You can use a variable to store base64 data and export it.

// filename.js
const image = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaH....";

export default image;

// import
import image from 'filename';

answered Feb 28, 2022 at 17:21

Neyaz Ahmad

1743 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nisharg Shah · Accepted Answer · 2022-02-28 17:31:04Z

1

There is three-way to do that, with FileReader and with fetch and the simplest way is to import it.

With Import

import Base64JSON from "./readme.json";

console.log(Base64JSON);

With FileReader

const readFile = async (json) =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    const blob = new Blob([JSON.stringify(json)]);

    reader.onload = async (e) => resolve(JSON.parse(e.target.result));
    reader.readAsText(blob);
  });

With Fetch

const readFileUsingHttp = async (path) => {
  const json = await fetch(path);
  return json.json();
};

Here is the sandbox URL that shows all techniques.

Codesandbox: https://codesandbox.io/s/eager-golick-uvtcnh?file=/src/App.js

edited Feb 28, 2022 at 17:31

answered Feb 28, 2022 at 17:23

Nisharg Shah

20k12 gold badges70 silver badges78 bronze badges

1 Comment

Nolan Jannotta Over a year ago

this is the solution! thank you, I didnt even need to use fetch or Filereader, I just had to put it in a json file and import it!

abhi patil · Accepted Answer · 2022-02-28 17:06:48Z

0

Decode the base64 using Buffer

let [imgSrc,setImgSrc] = useState('')
// 
let base64_to_imgsrc = Buffer.from(base64String, "base64").toString()
//add the string to the state
setImgSrc(base64_to_imgsrc)

and use it like this

  <img src={"data:image/jpeg;base64," + imgSrc} />

answered Feb 28, 2022 at 17:06

abhi patil

5142 silver badges12 bronze badges

1 Comment

Nolan Jannotta Over a year ago

thanks for the reply, my main problem is storing the base64 strings. is there a way to import the strings from a txt file?

Collectives™ on Stack Overflow

using Base64 images in react.js

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related