Gravei uma imagem no banco postgresql com o tipo OID e agora pretendo exibir essa imagem numa página html com a tag . Verifiquei que através do lo_export posso enviar para uma pasta e ler a partir de lá, mas pretendia ler direto sem ter que exportar, alguém conhece uma forma de o fazer?
1 Resposta
Utilize o arquivo codificado como string em base64, podendo incluí-lo diretamente no HTML conforme segue (exemplo com um PNG bem pequeno, para caber na resposta):
<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=">
Entretanto, Se você inseriu a imagem a partir do filesystem conforme exemplo da documentação, o dado é guardado como large object codificado em hexadecimal num campo bytea
:
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)
Para obter a imagem em formato base64, passe o retorno de lo_get()
para a função encode()
, explicitando o formato desejado:
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)
Aí é só pegar o resultado e colocar na tag <img>
conforme exemplificado:
<img src="data:image/png;base64,{RESULTADO DA QUERY}">
Como essa representação em HTML necessita que seja informado o formato da imagem, sugiro que o mesmo seja guardado na tabela de referência. Assim sua query pode retornar a tag já pronta para inclusão no 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)
Insira o resultado dessa query em seu arquivo HTML e pronto!
Ressalva quanto ao desempenho do HTML
Note a grande quantidade de informação contida mesmo em uma imagem minúscula como a do exemplo!
É importante lembrar que codificar imagens em string base64 para inclusão em HTML aumenta drasticamente o tamanho do documento, pois as imagens estão "anexas" dentro do mesmo.
Isso pode reduzir bastante o tempo de carregamento e processamento do seu HTML pelo browser, visto que o método comum de fazer referência a arquivos externos possibilita paralelismo de download, o uso de técnicas de lazy loading, cache HTTP etc., algo impossível quando colocamos tudo dentro de um só arquivão.
Há também a controvérsia de se armazenar imagens em bancos de dados. Se você não estiver efetuando operações exclusivas de banco de dados sobre os arquivos binários, certamente obterá muito mais desempenho ao servi-las diretamente como arquivos estáticos em seu web server. Dessa forma sua aplicação pode fornecer as imagens ao cliente sem nem precisar falar com o banco, ou apenas indo a ele para obter a URL certa do arquivo a ser mostrado.
Analise cuidadosamente seu caso de uso antes de decidir pelo emprego da codificação base64 em HTML, bem como pelo armazenamento de dados binários em servidor de bancos de dados.