Estoy tratando de usar imágenes codificadas en Base64 en mi aplicación de reacción.
actualmente cargo imágenes desde una carpeta y se ve así:
<img className="..." src={imageFile}></img>Quiero usar imágenes codificadas en base64, creo que puedo hacer esto:
<img className="..." src={"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaH...."}></img>el problema es que las cadenas base64 son enormes y, por alguna razón, no puedo almacenarlas en mi componente. Intenté ponerlos en un archivo txt y hacer:
fs.readFile('image.txt', function(err, data){console.log(data);})pero recibo toneladas de errores, que incluyen:
Uncaught TypeError: fs.readFile is not a functionentre otros.
¿Alguna idea de cómo almacenar cadenas base64 en un archivo separado y cargarlas en mi componente?
¡Gracias!
Decodifica el base64 usando Buffer
let [imgSrc,setImgSrc] = useState('') // let base64_to_imgsrc = Buffer.from(base64String, "base64").toString() //add the string to the state setImgSrc(base64_to_imgsrc)y usarlo así
<img src={"data:image/jpeg;base64," + imgSrc} />Puede usar una variable para almacenar datos base64 y exportarlos.
// filename.js const image = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaH...."; export default image; // import import image from 'filename';Hay tres formas de hacerlo, con FileReader y con fetch , y la forma más sencilla es importarlo.
Con Importación
import Base64JSON from "./readme.json"; console.log(Base64JSON);Con 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); });con buscar
const readFileUsingHttp = async (path) => { const json = await fetch(path); return json.json(); };Aquí está la URL de la zona de pruebas que muestra todas las técnicas.
Códigos y caja: https://codesandbox.io/s/eager-golick-uvtcnh?file=/src/App.js