display jpg image saved in bank (oid) postgresql for html

Use the file encoded as a base64 string, and you can include it directly in the HTML as follows (example with a very small PNG, to fit the answer):

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACw0lEQVQ4jYWT20uTYRzH37+hMwU1qNy0tvcpAjtQEURBhRQVBVFdZAftwFtBe6eOXtxsdSEVIR1J6SbNaNooRZmPzg62DIqKnNVa6GauvOhGYRfPp4s3AzvQFz43D58vPBffn6b9FmkIR+yUMGJeITt/EvMKKU8JQxrC8bs/sWwK62XNdrI9l1AjEjUSRY1EyaUfMNR1jt7QaqQprL+XvXrtp/snUV8foLJNkL0Lw4022buobBMq3UCybgvS1GsnlKOmsD41H4Phehiqg8w1yNRA+pJNpgYyV+FLHQzXk6xZRnT8Jy2mcMTPrYChG5C+CAMh+HwaUmWQ8v6kzH4bCNnOh7PET+fTYgqHFvV5jEx4KwycgZQJySMETiwhcFxA/07o30ng+CJ8JQKSR2xn4AzpWyuI+jyG1l6uy1zvHkgehfe7oa8I3/45+IpnwetCeF2Ir3gWxdtmQl+R7SSPkuveRHu5LrX2cl2qFxsgsQ1erYTnHtRTF+qJE/U4z+aJE9Xjgl7ddt5tRj1aRnu5W2ptFW6pOpyo1tkE900ieGAywUNTqSqdRtXh6Tal0wiWTCV4cArB4kmoNgeqM5+2CrfUWv1umevWUZ1zue6bwf9yvWwGqmseuUeCFr9bag/9C4zB5sWouJtEeD7xzmv/LL961kCiOQ/VqzN4fwkP/QsMLWy6HN3nBbxdD28Ekct5xFovMDb6/VdxbPQ78a6bRC474e0ieLeR7guCsOmypx2xFlqJe2vhww7oX0WsYSnVFW6qvB6qvDrVfg+xO8vh/Rr4uItEeB0Ra+HESTdVFtT2RTZD2g+D+yGzF7Il8PUwDO2DdAlkKumLbKWpsmDilMcTDhRYHVdWkXrqI/etAUbbYCxKbuQeqZ4KoldWEw4U/P2YxnPbcjkag/lGY8gl60NOWX/WKe+EXLIxmG/ctlx/nPMPet9k/gK9chkAAAAASUVORK5CYII=">

However, if you inserted the image from the filesystem example , the data is saved as large object encoded in hexadecimal in a bytea field:

create table image (
    name            text,
    extension       text,
    raster          oid
);
insert into image values ('smiley', 'png', lo_import('/tmp/smiley.png'));

select pg_typeof(lo_get(raster)) from image where name = 'smiley';
 pg_typeof 
-----------
 bytea
(1 row)

To get the image in base64 format, pass the return from lo_get() to the encode() , specifying the desired format:

select encode(lo_get(raster), 'base64') from image where name = 'smiley';
                                    encode                                    
------------------------------------------------------------------------------
 iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACw0lEQVQ4jYWT20uTYRzH37+hMwU1+
 qNy0tvcpAjtQEURBhRQVBVFdZAftwFtBe6eOXtxsdSEVIR1J6SbNaNooRZmPzg62DIqKnNVa6Gau+
 vOhGYRfPp4s3AzvQFz43D58vPBffn6b9FmkIR+yUMGJeITt/EvMKKU8JQxrC8bs/sWwK62XNdrI9+
 l1AjEjUSRY1EyaUfMNR1jt7QaqQprL+XvXrtp/snUV8foLJNkL0Lw4022buobBMq3UCybgvS1Gsn+
 lKOmsD41H4Phehiqg8w1yNRA+pJNpgYyV+FLHQzXk6xZRnT8Jy2mcMTPrYChG5C+CAMh+HwaUmWQ+
 8v6kzH4bCNnOh7PET+fTYgqHFvV5jEx4KwycgZQJySMETiwhcFxA/07o30ng+CJ8JQKSR2xn4Azp+
 WyuI+jyG1l6uy1zvHkgehfe7oa8I3/45+IpnwetCeF2Ir3gWxdtmQl+R7SSPkuveRHu5LrX2cl2q+
 FxsgsQ1erYTnHtRTF+qJE/U4z+aJE9Xjgl7ddt5tRj1aRnu5W2ptFW6pOpyo1tkE900ieGAywUNT+
 qSqdRtXh6Tal0wiWTCV4cArB4kmoNgeqM5+2CrfUWv1umevWUZ1zue6bwf9yvWwGqmseuUeCFr9b+
 ag/9C4zB5sWouJtEeD7xzmv/LL961kCiOQ/VqzN4fwkP/QsMLWy6HN3nBbxdD28Ekct5xFovMDb6+
 /VdxbPQ78a6bRC474e0ieLeR7guCsOmypx2xFlqJe2vhww7oX0WsYSnVFW6qvB6qvDrVfg+xO8vh+
 /Rr4uItEeB0Ra+HESTdVFtT2RTZD2g+D+yGzF7Il8PUwDO2DdAlkKumLbKWpsmDilMcTDhRYHVdW+
 kXrqI/etAUbbYCxKbuQeqZ4KoldWEw4U/P2YxnPbcjkag/lGY8gl60NOWX/WKe+EXLIxmG/ctlx/+
 nPMPet9k/gK9chkAAAAASUVORK5CYII=
(1 row)

Then just get the result and put in the <img> tag as exemplified:

<img src="data:image/png;base64,{RESULTADO DA QUERY}">

Since this HTML representation requires you to be informed of the image format, I suggest that it be saved in the reference table. So your query can return the tag already ready for inclusion in HTML:

select 
  format(
    '<img src="data:image/%s;base64,%s">', 
    extension,
    encode(lo_get(raster), 'base64')
  ) as img 
from image where name = 'smiley';
                                                     img                                                      
--------------------------------------------------------------------------------------------------------------
 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACw0lEQVQ4jYWT20uTYRzH37+hMwU1+
 qNy0tvcpAjtQEURBhRQVBVFdZAftwFtBe6eOXtxsdSEVIR1J6SbNaNooRZmPzg62DIqKnNVa6Gau                                +
 vOhGYRfPp4s3AzvQFz43D58vPBffn6b9FmkIR+yUMGJeITt/EvMKKU8JQxrC8bs/sWwK62XNdrI9                                +
 l1AjEjUSRY1EyaUfMNR1jt7QaqQprL+XvXrtp/snUV8foLJNkL0Lw4022buobBMq3UCybgvS1Gsn                                +
 lKOmsD41H4Phehiqg8w1yNRA+pJNpgYyV+FLHQzXk6xZRnT8Jy2mcMTPrYChG5C+CAMh+HwaUmWQ                                +
 8v6kzH4bCNnOh7PET+fTYgqHFvV5jEx4KwycgZQJySMETiwhcFxA/07o30ng+CJ8JQKSR2xn4Azp                                +
 WyuI+jyG1l6uy1zvHkgehfe7oa8I3/45+IpnwetCeF2Ir3gWxdtmQl+R7SSPkuveRHu5LrX2cl2q                                +
 FxsgsQ1erYTnHtRTF+qJE/U4z+aJE9Xjgl7ddt5tRj1aRnu5W2ptFW6pOpyo1tkE900ieGAywUNT                                +
 qSqdRtXh6Tal0wiWTCV4cArB4kmoNgeqM5+2CrfUWv1umevWUZ1zue6bwf9yvWwGqmseuUeCFr9b                                +
 ag/9C4zB5sWouJtEeD7xzmv/LL961kCiOQ/VqzN4fwkP/QsMLWy6HN3nBbxdD28Ekct5xFovMDb6                                +
 /VdxbPQ78a6bRC474e0ieLeR7guCsOmypx2xFlqJe2vhww7oX0WsYSnVFW6qvB6qvDrVfg+xO8vh                                +
 /Rr4uItEeB0Ra+HESTdVFtT2RTZD2g+D+yGzF7Il8PUwDO2DdAlkKumLbKWpsmDilMcTDhRYHVdW                                +
 kXrqI/etAUbbYCxKbuQeqZ4KoldWEw4U/P2YxnPbcjkag/lGY8gl60NOWX/WKe+EXLIxmG/ctlx/                                +
 nPMPet9k/gK9chkAAAAASUVORK5CYII=">
(1 row)

Insert the result of this query into your HTML file and you're done!

Emphasize HTML performance

Note the large amount of information contained in a tiny image like that of the example!

It is important to remember that encoding images in base64 string for inclusion in HTML dramatically increases the size of the document because the images are "enclosed" within it.

This can greatly reduce your browser's loading and processing time for your HTML, since the common method of referencing external files enables download parallelism, the use of lazy loading techniques, cache HTTP etc., something impossible when we put everything inside a single file.

There is also controversy about storing images in databases. If you are not performing unique database operations on the binary files, you will certainly get much more performance by serving them directly as static files on your web server . This way your application can deliver the images to the client without ever having to talk to the bank, or just going to it to get the right URL of the file to be shown.

Carefully review your use case before deciding to use base64 encoding in HTML as well as storing binary data on a database server.