4

Los datos se me guardan perfectamente en MySql, donde el path de la imagen En la base de datos figura así:

Z:\MATERIAS\Laboratorio_IV\ASP.NET\Librery_MVC\Librery_MVC\principal\imagenes\ContraLosZombis.jpg

Sin embargo cuando en la etiqueta <img /> le indico esa ruta no se visualiza la imagen en la view. (por las dudas aclaro que estoy utilizando el servidor local del visual studio)

Aquí el Controller:

[HttpPost]
    public ActionResult LibroInsertado()
    {
        ViewBag.Message = "Your contact page.";
        Libro book = new Libro();
        book.Nombre = Request.Form["txt_bookName"];
        var nombreImagen = Request.Form["itf_urlImage"];
        var path = Path.Combine(Server.MapPath("~/principal/imagenes/"), nombreImagen);
        book.UrlImagen = path;        
        return View(book);
    }

En LibroInsertado.cshtml hago la inserción del libro

Layout = "~/Views/Shared/_Layout.cshtml";
LibroService ls = new LibroService();
int filasAfectadas;
filasAfectadas = ls.InsertBook(Model);

Y aquí en Libros.cshtml hago el listado de los libros que agregue anteriormente sin embargo la imagen no se visualiza.

<tbody>            
foreach (Libro item in Model)
{ 
    <tr>
        <th><img src="/@item.UrlImagen.Replace("\\", "/")" width="80" height="100" /></th>    
    </tr>                     
}

2
  • Escribe en tu código esto <h1>@item.UrlImagen.Replace("\\", "/")</h1> antes del <img />,ejecuta la aplicación de nuevo y dime que muestra. Commented el 13 ene. 2020 a las 18:46
  • Hola Rafael! muestra esto: Z:/MATERIAS/Laboratorio_IV/ASP.NET/Librery_MVC/Librery_MVC/principal/imagenes/ContraLosZombis.jpg
    – Claudio
    Commented el 13 ene. 2020 a las 18:56

2 respuestas 2

1

Para visualizar la imagen en un <img src="" />, debes indicar la ruta relativa y NO la absoluta como estas haciendo ahora.

Simplemente debes eliminar del Path absoluto de la imagen la dirección en el Servidor (Server.MapPath("~")).

El código sería así:

   foreach (Libro item in Model)
   { 
       <tr>
          <th>
             <img src="@item.UrlImagen.Substring(Server.MapPath("~").Length).Replace("\\", "/")" width="80" height="100" />
          </th>    
       </tr>                     
    }

Nota: Tener en cuenta que el resultado en HTML debería ser así:

<img src="/principal/imagenes/ContraLosZombis.jpg" width="80" height="100">

o sea, la imagen debe estar en la ruta desde la raiz : /principal/imagenes/

1

No puedes cargar un archivo utilizando la ruta absoluta del servidor. Esto debido a que cuando una etiqueta <img /> tiene una ruta local absoluta, digamos por ejemplo c:/imagenes/1.tiff, el navegador buscara el archivo en la ruta de la maquina del cliente, no en la del servidor.

En vez de retornar la ruta, retorna la imagen como tal desde el action para que la etiqueta <img /> pueda cargarla.

[HttpPost]
public ActionResult LibroInsertado() {
    ViewBag.Message = "Your contact page.";
    Libro book = new Libro();
    book.Nombre = Request.Form["txt_bookName"];

    return View(book);
}

[HttpGet]
public FileResult ObtenerImagen(string itf_urlImage) {
    var nombreImagen = itf_urlImage;
    var path = Path.Combine(Server.MapPath("~/principal/imagenes/"), nombreImagen);

    return File(path);
}

Entonces en el img indicas la ruta del action. Suponiendo que esten dentro del controlador HomeController:

foreach (Libro item in Model) { 
    <tr>
        <th><img src="~/home/obtenerImagen?itf_urlImage=123" width="80" height="100" /></th>    
    </tr>                     
}

Recuerda que en la ruta puedes enviar los parametros que necesites.

1
  • Gracias por responder!, pero me sale un error en la función ObtenerImagen en el return File(path), dice "ninguna sobrecarga para el método 'File' toma 1 argumentos.
    – Claudio
    Commented el 13 ene. 2020 a las 18:35

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.