Home Saving/Retrieving image from sql server to express api into react app
Reply: 0

Saving/Retrieving image from sql server to express api into react app

user1856
1#
user1856 Published in July 18, 2018, 10:30 pm

My table looks like this

CREATE TABLE dbo.t_picures(
  picureId INT IDENTITY(1, 1) NOT NULL,
  name NVARCHAR(50) NOT NULL,
  extension NVARCHAR(10) NOT NULL,
  picture VARBINARY(MAX) NOT NULL,
  CONSTRAINT PK_pictureId PRIMARY KEY (pictureId)
);

I'm able to save an image into my SQL Server using the following SQL Statement:

INSERT INTO dbo.t_picture
VALUES (N'Smile.png', N'.png',
    (
        SELECT  *  
        FROM OPENROWSET(BULK N'C:\{Path to my image}\Smile.png',SINGLE_BLOB) AS picture
    )
)

When I SELECT picture FROM dbo.t_pictures WHERE name='Smile.png' the resulting column yields a resulting column that looks something like: 0xFFD8FFE000104A46494600010200006400640000FFDB0043... (It goes on for MUCH longer). I think that this is a long array of bytes.

I then send it through my express api and console.log(this.state.data.picture) the results on the client side of my react app. The picture column looks like this when it is console.logged in my react app: {type: "Buffer", data: Array(14598)}

I attempted to create an image by using <img src={this.state.data.picture} /> but the image appears as broken.

I've read in a few places that you can display this by converting the buffer array into a base64 string, but I'm not sure how to do that. I'm also not sure if I should do that in T-SQL when I'm first retrieving the data, or if I should convert it in javscript when I receive it on the client side.

How can I display the image using the value from {type: "Buffer", data: Array(14598)}? Also, is there a better approach to storing/retrieving images from sql server?

Any help would be very much appreciated! Thank you.

You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.302358 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO