i have a image object that is getting through axios and how to retrive my image from this object and how to display it in my react project. i am using this object in "" tag but its not working...
import React, { useState } from "react";
import Axios from "axios";
function MyUploader() {
const [image, setImage] = useState("");
const getimage = () => {
Axios.get("http://localhost:4000/getAllPosts").then((res) => {
let result = (res && res.data && res.data[0].file) || [];
setImage(result[0]);
});
};
return (
<div className="App">
<img src={image} alt=""/>
<button onClick={getImage}>getdata</button>
</div>
);
}there is my data object in which availabel of images array as the name of "files" that i am getting from axios request. and my question is this that how to display images in my project...
{
category: "women"
colors: (3) ['yellow', 'gray', 'green']
createdAt: "2021-10-03T18:13:02.711Z"
description: "Lorem Ipsum is simply dummy text of"
discount: 10
file: Array(3)
0: {fieldname: 'file', originalname: 'WhatsApp Image 2021-09-08 at 11.54.30 AM.jpeg', encoding: '7bit', mimetype: 'image/jpeg', destination: './public/newPostData/', …}
1: {fieldname: 'file', originalname: 'WhatsApp Image 2021-09-07 at 10.50.05 PM.jpeg', encoding: '7bit', mimetype: 'image/jpeg', destination: './public/newPostData/', …}
2: {fieldname: 'file', originalname: 'WhatsApp Image 2021-09-07 at 12.25.49 PM.jpeg', encoding: '7bit', mimetype: 'image/jpeg', destination: './public/newPostData/', …}
length: 3
[[Prototype]]: Array(0)
id: 1
name: "Flare Dress"
new: true
pictures: (4) ['/assets/images/fashion/product/1.jpg', '/assets/images/fashion/product/21.jpg', '/assets/images/fashion/product/36.jpg', '/assets/images/fashion/product/12.jpg']
price: 12000
rating: 4
sale: true
salePrice: 20000
shortDetails: "Sed ut perspiciatis, unde omnis iste natu"
size: (3) ['M', 'L', 'XL']
stock: 16
tags: (2) ['nike', 'caprese']
updatedAt: "2021-10-03T18:13:02.711Z"
variants: (3) [{…}, {…}, {…}]
__v: 0
_id: "6159f2ae77433b2df4e1ee43"
}Change your getImage method to this:
const getImage = () => {
Axios.get("http://localhost:4000/getAllPosts", {
responseType: "arraybuffer"
})
.then((res) => {
const base64 = btoa(
new Uint8Array(res.data).reduce(
(data, byte) => data + String.fromCharCode(byte),
''
)
)
setImage(base64)
})
}
Usage:
<img src={`data:;base64,${image}`} />
// or
<img src={`data:image/jpeg;charset=utf-8;base64,${image}`} />