Can Images stored as varbinary(max) in SQL Database be displayed?

IAmAMFTRex

I have images stored in a MS SQL Database table as varbinary(max) and I'm trying to figure out how to display them in JSReport. Currently I'm calling them from a script and want to do something like:

{{#each logo}}
   <img src="{{asset "{{logo}}" "dataURI"}}" />
{{/each}}

It throws errors whichever way I've attempted to do it.

Any suggestions?

admin

You get the image the same way as the other data from the database. You just need to convert binary bytes into a base64 form, then you can do something like

{{#each logo}}
   <img src="data:image/png;base64,{{{imageBase64}}}" />
{{/each}}

IAmAMFTRex

Thank you for the help but it's still not working - my images are store as jpg's so using:

<img src="data: image/jpg;base64,{{{logo}}}" />

Displays:

��PP@����t��;��Vї#8,z*���E�"����O��/�[������y�$h�',Ǡ��$�I j�M�z�֡��0��6K�ʯ�

+plus a lot more gibberish

I know it's something stupid I'm not getting but....?

admin

What's inside logo? There should be base64 string.

IAmAMFTRex

I use the following SQL to store a standard JPG image inside a varbinary(max) field:

INSERT INTO Logos(cid,logo)
SELECT 12484, BulkColumn  FROM  OPENROWSET(Bulk  'C:\Logos\12484.jpg', SINGLE_BLOB)  AS  BLOB

Then I have a script attached to my report that queries that table:

async function beforeRender(req, res) {
    await sql.connect(config)
    const sqlReq = new sql.Request();
    const recordset = await sqlReq.query(
        `SELECT * FROM Logos WHERE cid=12484`
    )
    Object.assign(req.data, { logo: recordset });         
	const logo=req.data.logo.recordset;
	req.data.logo=logo;
	console.log(logo);
}```

It seems to grab it fine, but the result looks to be encoded and I'm not sure how to get it displayed as an image.

admin

You just need to query sql and convert the buffer from the output to the base64.
The nodejs lib you use likely returns nodejs buffer as the value of the binary column.
So you need to convert it to the base64 string using abuffer.toString('base64').
In your case, the req.data.logo will be something like aBff2515AasVsdEF in the end.
You can take the code also out of the jsreport and troubleshoot it in the plain nodejs.