Home / Questions / 321514
Accepted
Claudio
Asked: 2020-01-14 10:03:41 +0800 CST 2020-01-14 10:03:41 +0800 CST

Doesn't display image in <img /> tag with absolute Image Path - ASP.NET MVC

  • 772

The data is saved perfectly in MySql, where the path of the image in the database appears like this:

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

However, when <img />I indicate that path in the label, the image is not displayed in the view. (just in case I clarify that I am using the local server of visual studio)

Here the 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);
    }

In LibroInsertado.cshtmlI do the insert of the book

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

And here in Libros.cshtmlI make the list of the books that I added previously, however the image is not displayed.

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

c#

2 Answers

  1. You cannot upload a file using the absolute path of the server. This is because when a tag <img />has an absolute local path, say for example c:/imagenes/1.tiff, the browser will look for the file in the path of the client machine, not in the one of the server.

    Instead of returning the path, it returns the image itself from the action so the tag <img />can load it.

    [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);
}

    Then in imgit you indicate the route of the action. Assuming they are inside the controller HomeController:

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

    Remember that in the route you can send the parameters you need.

    • 1
  2. Best Answer

    To display the image in a <img src="" />, you must indicate the relative path and NOT the absolute one as you are doing now.

    You simply have to remove the address on the Server ( ) from the absolute Path of the image .Server.MapPath("~")

    The code would be like this:

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

    Note: Keep in mind that the result in HTML should be like this:

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

    that is, the image must be in the path from the root: /principal/imagenes/

    • 1