通过 axios 获取图像如何显示在我的反应项目上

Question

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

Answer 1

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

Answer 2

It's not really a good practice to mess up binary data with metadata. Better to have an endpoint that would return binary and right headers for browser to display it like that:

<img src="https://yourapi.com/image/2"/>