1

A través de un web api estoy obteniendo la ruta de una imagen almacenada en el servidor. La ruta es un string que convierto a un array de bytes para luego convertirlo en una imagen en base64. Cuando visualizo la imagen en la vista, no arroja ningún error pero no carga ninguna imagen. No encuentro donde tengo el error.

CODIGO:

// Por cada registro que obtengo, transformo el campo "adjunto" (ruta de la imagen) en arreglo de bytes
    private MisTurnos MapearAMisTurnosDesdeRegistro(Registro registro)
    {
        return new MisTurnos
        {
            Codigo = Convert.ToInt32(registro["numero"]),
            Fecha = Convert.ToDateTime(registro["fecha"]),
            Hora = registro["hora"].ToString(),
            Servicio = registro["servicio"].ToString(),
            Sucursal = registro["sucursal"].ToString(),
            Estado = Convert.ToInt32(registro["estado"]),

            // Esta propiedad es la que utilizo para guardar la imagen
            Orden = Encoding.UTF8.GetBytes(registro["adjunto"].ToString())
        };
    }


// Por cada registro que obtuve del web api con la ruta de la imagen correspondiente
// transformada en arregl ode bytes, transformo ese arreglo en base64
    private IEnumerable<MisTurnosViewModel> ConvertirOrdenEnImagen(IEnumerable<MisTurnosViewModel> listaTurnos)
    {
        foreach (var item in listaTurnos)
        {
            item.OrdenImagen = "data:image/png;base64," + Convert.ToBase64String(item.Orden);
        }

        return listaTurnos;
    }

Por último, en la vista, muestro en un tag la propiedad OrdenImagen, que contiene la imagen transformada a base64:

<img [email protected] />
2
  • 1
    que valor tiene src si das click a inspecionar elemento ? Commented el 26 may. 2017 a las 17:56
  • 1
    Revisa el tu etiqueta img, ya que aquí la expones de esta forma <img [email protected] /> cuando debería estar de esta manera <img src="@item.OrdenImagen" /> solo faltan comillas
    – JuankGlezz
    Commented el 26 may. 2017 a las 18:01

1 respuesta 1

4

Para convertir una imagen en una string codificado podes usar algo como esto:

    /// <summary>
    /// Convierte una imagen en una cadena de texto
    /// </summary>
    /// <param name="Path">Ruta la la imagen</param>
    /// <returns>cadena de texto</returns>
    private static string Conversor(string Path)
    {
        byte[] imageArray = System.IO.File.ReadAllBytes(Path);
        string base64ImageRepresentation = Convert.ToBase64String(imageArray);
        return base64ImageRepresentation;
    }

Supongamos que en el modelo tenemos obtenemos el valor de la imagen:

    public string Imagen64
    {
        get
        {
            return "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";
        }
    }

Para mostrarla en la vista podes usar:

      @{
        var imgSrc = String.Format("data:image/gif;base64,{0}", Model.Imagen64);
      }
        <p>Imagen es:</p>
        <img src="@imgSrc" />
1
  • Gracias, con este ejemplo fácil y claro lo pude solucionar!
    – Willy616
    Commented el 26 may. 2017 a las 20:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.