Display mssql varbinary(max) pictures in form

[vogel61]

I am sure it must be possible to display pictures that are stored in a mssql database in sqlpage. Maybe someone may direct me in the right direction or show me a syntax example ...

[lovasoa]

Yes, it is possible! In what form are they stored in your database? The goal is to convert them to data URLs and pass the result as an image link.

[vogel61]

thanks a lot for your answer. Originally, they were jpgs, around 250x250, now residing inside a varbinary(max).

Do I have to encode it in the sql query? How could the code for displaying them in sqlpage look like?

BTW, deepseek r1 directed me to sqlpage as the preferred solution for my problem (I quickly needed a small meal voucher application with barcode scanning). Within one day it was up and running! It is a great tool for hassle-free web based frontends.

Now I got greedy :-) and tried to implement a very simple warehouse management for our stock items. I gloriously failed to be able to properly display the item thumbnails, let alone being able to swap pictures with updated ones on the local hard drive.

Perhaps you can direct me in the right direction to make this work?

Kind regards, Richard

[lovasoa]

Nice to see deepseek recommending us! What was your prompt, out of curiosity?

Here is a suggestion to generate the image data URLs from mssql:

-- Create a simple warehouse management table
CREATE TABLE WarehouseItems (
    ID INT IDENTITY(1,1) PRIMARY KEY,
    Name VARCHAR(100),
    Quantity INT,
    Thumbnail VARBINARY(MAX)  -- Store image data
);

-- Insert sample data with thumbnails
INSERT INTO WarehouseItems (Name, Quantity, Thumbnail)
VALUES 
  ('Box A', 50, 0x89504E470D0A1A0A),  -- Sample PNG header
  ('Pallet B', 20, 0xFFD8FFE000104A46), -- Sample JPEG header
  ('Container C', 5, 0x89504E470D0A1A0A); -- Another PNG

-- Define SQLPage card component
SELECT 'card' AS component, 'Warehouse Inventory' AS title, 2 AS columns;

-- Provide a row for each item
SELECT 
    Name AS title,
    'Quantity: ' + CAST(Quantity AS VARCHAR) AS description,
    'data:image/png;base64,' + 
    (SELECT Thumbnail FOR XML PATH(''), BINARY BASE64, TYPE).value('.', 'VARCHAR(MAX)') AS top_image
FROM WarehouseItems;

Replace image/png with
image/jpeg
image/gif
image/bmp
image/webp
image/tiff
image/svg+xml
etc. depending on the format of your images

[vogel61]

Wow! so fast, will try ASAP!

The prompt I made was in german, so I have had it translated to english by deepl:

I have a mssql database in which information about meal vouchers is stored (voucher number, who received the voucher). I need a simple web-based interface that can be used to issue and return vouchers to specific employees (by scanning a QR code). A stored procedure takes care of all the internals, on the interface only the mode (issue to employee X and central return of the used vouchers) has to be set and then the vouchers are scanned one after the other by inserting the barcode into a table field. That's all for now. What is the easiest way to connect the mssql database to a web-based interface and which freely available tools do I need for this?

Translated with DeepL.com (free version)

in the course of the conversation I uploaded the database create and deepseek did fairly well, but later started to hallucinate quite a bit and merged sqlpage and t-sql, but by going forth and back and reading your documention, it took me about 4 hrs until the app was finished ...

[lovasoa]

If you are on azure sql, there is this function https://learn.microsoft.com/en-us/sql/t-sql/functions/base64-encode-transact-sql?view=azuresqldb-current

[vogel61]

Ophir, I tried it out (adapted a little bit), the sql query works fine within sql server, but I get a syntax error if I issue the very same sql in sqlpage (see attached screendump). Any ideas about what I made wrong? kr Richard Am So., 9. Feb. 2025 um 10:05 Uhr schrieb Ophir LOJKINE < ***@***.***>:

…

Nice to see deepseek recommending us! What was your prompt, out of curiosity? Here is a suggestion to generate the image data URLs from mssql: -- Create a simple warehouse management tableCREATE TABLE WarehouseItems ( ID INT IDENTITY(1,1) PRIMARY KEY, Name VARCHAR(100), Quantity INT, Thumbnail VARBINARY(MAX) -- Store image data ); -- Insert sample data with thumbnailsINSERT INTO WarehouseItems (Name, Quantity, Thumbnail)VALUES ('Box A', 50, 0x89504E470D0A1A0A), -- Sample PNG header ('Pallet B', 20, 0xFFD8FFE000104A46), -- Sample JPEG header ('Container C', 5, 0x89504E470D0A1A0A); -- Another PNG -- Define SQLPage card componentSELECT 'card' AS component, 'Warehouse Inventory' AS title, 2 AS columns; -- Provide a row for each itemSELECT Name AS title, 'Quantity: ' + CAST(Quantity AS VARCHAR) AS description, 'data:image/png;base64,' + (SELECT Thumbnail FOR XML PATH(''), BINARY BASE64, TYPE).value('.', 'VARCHAR(MAX)') AS top_imageFROM WarehouseItems; — Reply to this email directly, view it on GitHub <#803 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYK22YAOOC37EGMTIHGEJDT2O4K7BAVCNFSM6AAAAABWYRNCI2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMJQG42TAMI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[vogel61]

to be exact, I used perplexity.ai and used r1 for reasoning ... Richard Vogel ***@***.***> schrieb am So., 9. Feb. 2025, 11:22:

…

Ophir, I tried it out (adapted a little bit), the sql query works fine within sql server, but I get a syntax error if I issue the very same sql in sqlpage (see attached screendump). Any ideas about what I made wrong? kr Richard Am So., 9. Feb. 2025 um 10:05 Uhr schrieb Ophir LOJKINE < ***@***.***>: > Nice to see deepseek recommending us! What was your prompt, out of > curiosity? > > Here is a suggestion to generate the image data URLs from mssql: > > -- Create a simple warehouse management tableCREATE TABLE WarehouseItems ( > ID INT IDENTITY(1,1) PRIMARY KEY, > Name VARCHAR(100), > Quantity INT, > Thumbnail VARBINARY(MAX) -- Store image data > ); > -- Insert sample data with thumbnailsINSERT INTO WarehouseItems (Name, Quantity, Thumbnail)VALUES > ('Box A', 50, 0x89504E470D0A1A0A), -- Sample PNG header > ('Pallet B', 20, 0xFFD8FFE000104A46), -- Sample JPEG header > ('Container C', 5, 0x89504E470D0A1A0A); -- Another PNG > -- Define SQLPage card componentSELECT 'card' AS component, 'Warehouse Inventory' AS title, 2 AS columns; > -- Provide a row for each itemSELECT > Name AS title, > 'Quantity: ' + CAST(Quantity AS VARCHAR) AS description, > 'data:image/png;base64,' + > (SELECT Thumbnail FOR XML PATH(''), BINARY BASE64, TYPE).value('.', 'VARCHAR(MAX)') AS top_imageFROM WarehouseItems; > > — > Reply to this email directly, view it on GitHub > <#803 (reply in thread)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AYK22YAOOC37EGMTIHGEJDT2O4K7BAVCNFSM6AAAAABWYRNCI2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMJQG42TAMI> > . > You are receiving this because you authored the thread.Message ID: > ***@***.***> >

[vogel61]

Thank you, I made a view with encoded pics, that works ... Am So., 9. Feb. 2025 um 12:01 Uhr schrieb Ophir LOJKINE < ***@***.***>:

…

If you are on azure sql, there is this function https://learn.microsoft.com/en-us/sql/t-sql/functions/base64-encode-transact-sql?view=azuresqldb-current — Reply to this email directly, view it on GitHub <#803 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYK22YAVLIJFE2MNT54C7AT2O4YQZAVCNFSM6AAAAABWYRNCI2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMJQHAYTANI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[lovasoa]

great! can you share your code, and the initial incorrect syntax error so that we can fix it?

[vogel61]

The original code with your suggestion is the window in the middle, left top shows that it works if issued from mssql server directly, to the right you see the error:

https://drive.google.com/drive/folders/1VXJytWcc9ukiz_0Y2HBxNrOZKc_Ek-rp?usp=sharing (does not work directly here, need to copy)

Finally, I created a view using the below select and this view could be used directly to show pictures from the database on a card:

SELECT id, part, descr,
{fn CONCAT('data:image/jpeg;base64,', CAST('' AS XML ).value('xs:base64Binary(sql:column("pic"))', 'VARCHAR(MAX)'))} AS pic
FROM dbo.article

I wish I knew how to scale down the pic on the card, because it spreads all over the width of the card, or even better, if tables would also display pics, because there I can easily sort and filter. The thumbnail pics are just a visual aid to quickly identify the correct article.
I would be even happy to only show the pic once the form editing ist started, but this does not work also.

[lovasoa]

I also wrote a fix for the markdown library we use, we now have to get it accepted: wooorm/markdown-rs#164

[lovasoa]

I got a fix in in the markdown lib, data URLs will work in v0.34

[vogel61]

I tried in 0.34. Same behaviour, it does not show pics in tables. Did I miss something?

SELECT 'shell' AS component,
    'Article' AS title,
'JetBrains Mono' AS font,
 'dark' as theme;

SELECT 'table' AS component,
1 AS small,
'pic' as markdown,
1 AS search;

SELECT
    '![.]data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCADvAPoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD7I+B/wP8ABXjj4YaPrmuaO1/qt4bhp7lrydTIRPIoJCuBnCjtXdf8MyfDT/oW/wDyfuf/AI5R+zJ/yQ/w3/28/wDpTLXqNAHl3/DMnw0/6Fv/AMn7n/45R/wzJ8NP+hb/APJ+5/8Ajleo0UAeXf8ADMnw0/6Fv/yfuf8A45R/wzJ8NP8AoW//ACfuf/jleo0UAeXf8MyfDT/oW/8Ayfuf/jlH/DMnw0/6Fv8A8n7n/wCOV6jRQB5d/wAMyfDT/oW//J+5/wDjlH/DMnw0/wChb/8AJ+5/+OV6jRQB5d/wzJ8NP+hb/wDJ+5/+OUf8MyfDT/oW/wDyfuf/AI5XqNFAHl3/AAzJ8NP+hb/8n7n/AOOUf8MyfDT/AKFv/wAn7n/45XqNFAHl3/DMnw0/6Fv/AMn7n/45R/wzJ8NP+hb/APJ+5/8Ajleo0UAeXf8ADMnw0/6Fv/yfuf8A45R/wzJ8NP8AoW//ACfuf/jleo0UAeXf8MyfDT/oW/8Ayfuf/jlH/DMnw0/6Fv8A8n7n/wCOV6jRQB5d/wAMyfDT/oW//J+5/wDjlH/DMnw0/wChb/8AJ+5/+OV6jRQB5d/wzJ8NP+hb/wDJ+5/+OUf8MyfDT/oW/wDyfuf/AI5XqNFAHl3/AAzJ8NP+hb/8n7n/AOOUf8MyfDT/AKFv/wAn7n/45XqNFAHl3/DMnw0/6Fv/AMn7n/45R/wzJ8NP+hb/APJ+5/8Ajleo0UAeXf8ADMnw0/6Fv/yfuf8A45R/wzJ8NP8AoW//ACfuf/jleo0UAeXf8MyfDT/oW/8Ayfuf/jlfDUeualDGqJqF0iKAqqszAADoAM1+m1fl5QB95fsyf8kP8N/9vP8A6Uy16jXl37Mn/JD/AA3/ANvP/pTLXqNABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFfl5X6h1+XlAH3l)'  AS pic2,
    'RS-103-0989' AS title,
    'Hirschmann ST Schwere Steckverbinder Buchse Schwarz, Grau 3P + E, 250 V, 400 V / 16A, Kabelmontage IP54' AS description
;


-- Define SQLPage card component
SELECT 'card' AS component, 'Warehouse Inventory' AS title, 2 AS columns;

-- Provide a row for each item
SELECT
    'RS-103-0989' AS title,
    'Hirschmann ST Schwere Steckverbinder Buchse Schwarz, Grau 3P + E, 250 V, 400 V / 16A, Kabelmontage IP54' AS description,
        'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/2wBDAAMCAgMCAgMDAwMEAwMEBQgFBQQEBQoHBwYIDAoMDAsKCwsNDhIQDQ4RDgsLEBYQERMUFRUVDA8XGBYUGBIUFRT/2wBDAQMEBAUEBQkFBQkUDQsNFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBT/wAARCADvAPoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD7I+B/wP8ABXjj4YaPrmuaO1/qt4bhp7lrydTIRPIoJCuBnCjtXdf8MyfDT/oW/wDyfuf/AI5R+zJ/yQ/w3/28/wDpTLXqNAHl3/DMnw0/6Fv/AMn7n/45R/wzJ8NP+hb/APJ+5/8Ajleo0UAeXf8ADMnw0/6Fv/yfuf8A45R/wzJ8NP8AoW//ACfuf/jleo0UAeXf8MyfDT/oW/8Ayfuf/jlH/DMnw0/6Fv8A8n7n/wCOV6jRQB5d/wAMyfDT/oW//J+5/wDjlH/DMnw0/wChb/8AJ+5/+OV6jRQB5d/wzJ8NP+hb/wDJ+5/+OUf8MyfDT/oW/wDyfuf/AI5XqNFAHl3/AAzJ8NP+hb/8n7n/AOOUf8MyfDT/AKFv/wAn7n/45XqNFAHl3/DMnw0/6Fv/AMn7n/45R/wzJ8NP+hb/APJ+5/8Ajleo0UAeXf8ADMnw0/6Fv/yfuf8A45R/wzJ8NP8AoW//ACfuf/jleo0UAeXf8MyfDT/oW/8Ayfuf/jlH/DMnw0/6Fv8A8n7n/wCOV6jRQB5d/wAMyfDT/oW//J+5/wDjlH/DMnw0/wChb/8AJ+5/+OV6jRQB5d/wzJ8NP+hb/wDJ+5/+OUf8MyfDT/oW/wDyfuf/AI5XqNFAHl3/AAzJ8NP+hb/8n7n/AOOUf8MyfDT/AKFv/wAn7n/45XqNFAHl3/DMnw0/6Fv/AMn7n/45R/wzJ8NP+hb/APJ+5/8Ajleo0UAeXf8ADMnw0/6Fv/yfuf8A45R/wzJ8NP8AoW//ACfuf/jleo0UAeXf8MyfDT/oW/8Ayfuf/jlfDUeualDGqJqF0iKAqqszAADoAM1+m1fl5QB95fsyf8kP8N/9vP8A6Uy16jXl37Mn/JD/AA3/ANvP/pTLXqNABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFfl5X6h1+XlAH3l' AS top_image
;

[lovasoa]

@vogel61 , you have a small syntax error. The following works:

SELECT 'table' AS component,
1 AS small,
'pic' as markdown,
1 AS search;

SELECT
    '![.](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wAARCABUAJYDASIAAhEBAxEB/8QAGwABAAIDAQEAAAAAAAAAAAAAAAEFAwQGAgf/xAAsEAACAgIABQMDAwUAAAAAAAAAAQIDBBEFEiExQRNRcQYUIjJCoRUjcoHR/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAEC/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oADAMBAAIRAxEAPwD6AAAAAAAAACABIAAAAAAAAAAAAAAAAAAAACCk4x9TYfC5VR5XkSs29VyXRJ63v5Mv1Rzf0O7llKK3HfK9bW9Hz/E4SsnOhV6mq2m9rutFkGfH4txjN4p9zj32+t7b/BR9tdtHSVZedG/7nJy27Na5IdK4r215+WYqaK8atVVQUIrwl3Pfg1iL7D4nVfqFmoWfwzfOPS0/x6LyvBYYXFLKEo2bsr8Lyvglg6EGKjIryIc1Utrz7oymVAAAAAAAAAAAAAAAAY7qq76pVWwU4SWnGS2mcxmcEhw3Poyseb9GU3Fwl3i2n2fsdWeJwjZFxnFSi/DA5V3RnlSx5RamltP3RFkJV/Ba5fC3Cfq0LmSWuXyv+mha/wC1NNddM3KNTaf+K/knbXV/qfZex6nDTbS2opPRglK2MmpQabbS7NMI2qbrKZqVUmpLyvJeYHEVkP07I8tnuuzOcrk0vyTTZs4+VPHsjNflrr18CzR1RJp4efXkxX7ZPx7m2YVIAAAAAAAAAAAAAAAINLO4fDJhJw1C1rv7/JvEAcrkU2USshZFp8q6+H3IytqvmhpT3pM6e/HryK+S2KlEp87hN70sfU05J9Xpr5NSir5OWKjLbaXd+TDZdGl6/VJ9kWuTiTperY7T7SXYpq6nLKtnLqovS/0XUb+NdJSjJfr7raLnAzLZ2endKMm3rp3XycnxfNswsRKh6vu6KS/bHy/ky/Q+PbPIstlvkWm2/JKO5JIJMqAAAAAAAAAAAAAAAAEEgDzKMZxcZJNPumV1nCKIKydEXzz68rl0ZZkAcvfwX73Ig5Rn+C5XFrXn3L/h+FVg46qqil76NkkugACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD/9k=)'  AS pic,
    'RS-103-0989' AS title,
    'Hirschmann ST Schwere Steckverbinder Buchse Schwarz, Grau 3P + E, 250 V, 400 V / 16A, Kabelmontage IP54' AS description
;

[vogel61]

I am on a business trip today and have no access to this data. I will come back to you tomorrow. Ophir LOJKINE ***@***.***> schrieb am Mo., 10. Feb. 2025, 14:18:

…

Could you copy and paste the contents of some of the values in the pic column here so that we can debug why they are not showing ? — Reply to this email directly, view it on GitHub <#803 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYK22YCIT4IBIKP4BE74CQL2PCRKZAVCNFSM6AAAAABWYRNCI2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMJRHE2DKNY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[vogel61]

thanks a lot! Looking forward to the release of 0.34! Ophir LOJKINE ***@***.***> schrieb am Sa., 1. März 2025, 22:33:

…

I got a fix in in the markdown lib, data URLs will work in v0.34 — Reply to this email directly, view it on GitHub <#803 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AYK22YDWRMTC6E26R6NKPF32SIRTFAVCNFSM6AAAAABWYRNCI2VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMZWGI2DMNA> . You are receiving this because you authored the thread.Message ID: ***@***.***>