javascript - using Base64 images in react.js - Stack Overflow

admin管理员组

文章数量:1360351

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 ponent. 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 ponent?

Thanks!

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 ponent. 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 ponent?

Thanks!

• javascript
• reactjs
• image
• base64

Share Improve this question Follow asked Feb 28, 2022 at 16:57 Nolan JannottaNolan Jannotta 12711 gold badge22 silver badges88 bronze badges 4

• You can not read any files in react using fs module, there is one way to do that but its bit debatable – 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 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 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 Commented Feb 28, 2022 at 17:58

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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';

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

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

本文标签： javascriptusing Base64 images in reactjsStack Overflow