Mostrar imagen guardada en la base de datos con ASP.NET Core Razor Pages

ASP.NET CoreImagen en la base de datos

Oscar Trujillo

29 ene 2022

Mostrar imagen guardada en la base de datos con ASP.NET Core Razor Pages

Oscar Trujillo Morales

El propósito de este breve post es explicar la forma de leer una imagen almacenada en una base de datos -Sql Server en este caso-. Una vez hecho esto, lo suyo es mostrarla en la vista. En caso de que utilicemos el código para mostrar la imagen en varias vistas, conviene echar mano a una función, de manera que evitemos el código espaguetti.

Repositorio en Git

En la base de datos tenemos lo siguiente

CREATE TABLE [dbo].[Usuarios](
	...
	[nombre] [varchar](100) NOT NULL,
	[foto] [varbinary](max) NULL,
	[correo] [varchar](50) NULL,
    ...

Generamos una clase auxiliar que contendrá métodos estáticos de utilidades

using Microsoft.AspNetCore.Mvc;

namespace TUNAMESPACE.Helper
{
    public class Utilidades
    {
        public static  string DevuelveFoto(
            IUrlHelper Url, byte[] photo)
        {
            string imageSrc = string.Empty;
            if (photo != null)
            {
                imageSrc = string.Format(`data:image;base64,{0}`,
                System.Convert.ToBase64String(photo));
            }
            else
            {
                imageSrc = Url.Content
                (`~/Resources/generic-user.jpg`);
            }

            return imageSrc;
        }
    }
}

En la vista definimos lo siguiente:

@{
    byte[] photo = @item.Foto;
    string imageSrc =
    Utilidades.DevuelveFoto(Url, photo);
}

&lt;img src=`@imageSrc`
style=`max-width: 180px;max-height: 150px;
text-align:center` alt=`@item.Nombre` &gt;

@*&lt;img src=`data:image/jpg;base64,
    @(Convert.ToBase64String(item.Foto))` alt=`@item.Nombre` /&gt; *@