2

I loaded a 56kb image to a table in a MySQL Db via PHP myAdmin. The value says "[BLOB-56.2 KiB]. I am trying to retrieve this image from my node.js backend and display it on my React.js front end. I can retrieve it as a buffer but I am unsure how to actually get the image back from this. Here is my backend retrieval...

app.post("/api/get-camera-image", (req, res) => {
    const device = req.body.device
    const sql = "SELECT image FROM `deviceInformation` WHERE device='" + device + "'";
    dbUser.query(sql, (err, result) => {
        console.log(result)
        res.send(result)
        res.end()
    })
})

and the console.log(result) produces this in the console...

[
  RowDataPacket {
    image: <Buffer ff d8 ff e1 02 b7 45 78 69 66 00 00 4d 4d 00 2a 00 00 00 08 00 09 01 03 00 03 00 00 00 01 00 06 00 00 01 00 00 04 00 00 00 01 00 00 02 a3 01 
10 00 02 ... 57470 more bytes>
  }
]

My front end looks like this...

useEffect(() => {
    Axios.post("http://localhost:3001/api/get-camera-image", {device: props.device}, {responseEncoding: 'binary'})
        .then((response) => {
            const blob = new Blob( response.data );
            const url = URL.createObjectURL( blob );
            setFileInDB(url)
        })
}, [props.device])

and I am trying to display the fileInDB as an image like so...

return (
    <div>
        <img height='100' src={fileInDB} alt="Nothing in DB" />
    </div>
)

I successfully converted the response.data, which is a buffer, into a blob. I then create a url for the blob and stored it in fileInDB state variable. If I console.log(fileInDB) I get this...

blob:http://localhost:3000/da240ace-8fed-4781-b06b-6ae4136853bd

This would normally work if it were getting the picture from a website but this doesn't work for my case.

Justin O
  • 67
  • 1
  • 11
  • 1
    Check out [`URL.createObjectUrl()`](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) – Phil May 28 '21 at 00:58
  • Hmm, I am not sure what to do with this. It does not accept array buffer. – Justin O May 28 '21 at 01:06
  • or you might want to manually encode it to base64 – Kristian May 28 '21 at 01:26
  • @Phil I have this almost working but the reason it isn't is because I am not fetching this from a website with a url but instead a sql DB. So, my web app creates a local url which isn't working. It displays nothing. However, I am successfully converting the arrayBuffer to a blob >>> the blob into a url >>> and the . But it just doesn't work because the url is a localhost url that redirects to login. – Justin O May 28 '21 at 01:41
  • Try using `responseType: "blob"` instead. Alternately, create a new `Blob` from the array buffer... `URL.createObjectUrl(new Blob(response.data))`. Personally, I prefer using `createObjectUrl` over creating a base64 encoded string. If you're still having issues, please update the code in your question – Phil May 28 '21 at 01:47
  • @Phil ok, I edited the post to add the requests you posted. I can successfully get a url but it doesn't display the image still. – Justin O May 28 '21 at 02:04
  • If the response is already an array buffer, why are you wrapping it in an array in the `Blob` constructor? I think `new Blob(response.data)` should work. If not, try `new Blob(response.data, { type: "image/jpg" })` – Phil May 28 '21 at 02:09
  • Sorry, the response is a buffer, not array buffer. I missed that. – Justin O May 28 '21 at 02:14
  • But you have `responseType: 'arraybuffer'` – Phil May 28 '21 at 02:28
  • Ya I fixed that, code above is up to date. What is strange is that when I do this same stuff to a fileI retrieved from local file, it works. Makes me wonder if something different must be done when dealing with MySQL DB? – Justin O May 28 '21 at 02:35

0 Answers0