Image not showing in React.js

Question

This is my App.js File Here i want to show the image from the MongoDB database.

Image are saved as a Binary data into MongoDB

How can i Show my image in the React Page??

import React,{useState} from "react";
import "./App.css";


function App() {
  const [image, setImage] = useState([]);
  const btn = async() =>{
    let result = await fetch("http://localhost:5000/a");
    result = await result.json();
    //console.log(result[0].img.data.data);
    setImage(result)
  }
  return (
    <div className="App">
      <h1>Image uploading react</h1>
      {
        image.map((value)=>{
          return(
            <>
            <h3>ID: {value._id}</h3>
            <h3>Name: {value.name}</h3>

            {/* What should I write here to show the image? */}
            <img src="#" />
            
            </>
            
          )
        })
      }
      <button onClick={btn}>Click Here to See the output</button>
    </div>
  );
}

export default App;

score 0 · Answer 1 · answered Sep 14 '22 at 16:25

0

Depending on where your data can be accessed within the object, this is how you'd do it. Load the binary data into a variable, then include in the image tag as below:

const imgData = value.img.data.data;

<img src="{`data:image/jpeg;base64,${imgData}`}">

answered Sep 14 '22 at 16:25

Kris

13
5

KSlort, Its not working.... – Minhazul Abedin Munna Sep 14 '22 at 16:32
[Here](https://stackoverflow.com/questions/42395034/how-to-display-binary-data-as-image-in-react) is an example for rendering a binary image as KSlort written – Halil Sep 14 '22 at 17:21
This answer appears to make the image source *the* literal string ```"{`data:image/jpeg;base64,${imgData}`}"```. – Drew Reese Sep 15 '22 at 00:52

Image not showing in React.js

1 Answers1