After following this method, I successfully uploaded my image as a string:
const [image, setImage] = useState("");
//------------------^^^^^^^^^^^^^^^^-------------------------
const handleImage = (e) => {
console.log("Handle image called");
const selectedFile = e.target.files[0];
console.log("Selected file:", selectedFile);
if (selectedFile) {
const reader = new FileReader();
reader.onload = (e) => {
const imageData = e.target.result;
console.log("imageData: ", imageData);
setImage(imageData); // Store the Base64-encoded image data
};
reader.readAsDataURL(selectedFile);
}
};
Now, in another file, I retrieved data from mongo which includes an image encoded in base 64. However, when trying to render the image, only the alt text is showing:
const petCards = petData.map((pet, index) => (
<div className="card-results-find" key={index}>
<div className="img-card-find">
<Image
src={`data:image/jpeg;base64,${pet.image}`}
//I have also tried {petData.image} for src
alt={pet.catName}
layout="fill"
/>
</div>
//css:
.img-card-find {
position: relative;
width: 100%;
height: 90vh;
}
The petData.image contains something like this: image EDIT I extracted the image data like this:
const imageData = imageBase64.split(",")[1];