在 react.js 中使用 Base64 圖像

Question

我正在嘗試在我的反應應用程序中使用 Base64 編碼圖像。

目前我從一個文件夾加載圖像，看起來像這樣：

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

我想使用 base64 編碼的圖像，我想我可以這樣做：

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

問題是 base64 字符串很大，出於某種原因，我無法將它們存儲在我的組件中。 我嘗試將它們放在一個 txt 文件中並執行以下操作：

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

但我得到了大量的錯誤，包括：

Uncaught TypeError: fs.readFile is not a function

其中。

任何想法如何將 base64 字符串存儲在單獨的文件中並將它們加載到我的組件中？

謝謝！

Answer 1

您可以使用變量存儲base64數據並將其導出。

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

export default image;

// import
import image from 'filename';

Answer 2

使用緩沖區解碼 base64

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

並像這樣使用它

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

Answer 3

有三種方法可以做到這一點，使用FileReader和fetch ，最簡單的方法是導入它。

帶進口

import Base64JSON from "./readme.json";

console.log(Base64JSON);

使用文件閱讀器

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);
  });

使用 Fetch

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

這是顯示所有技術的沙盒 URL。

代碼沙盒： https://codesandbox.io/s/eager-golick-uvtcnh?file=/src/App.js

Answer 4

我向 Base64 推薦這個網站的圖像。 這是非常簡單和有用的。 https://toolsofweb.com/image-to-base64