Display dynamic images using Razor

Question

Display dynamic images using Razor

Navigation

#1 by (4 votes)
#2 by (1 votes)

2

Hello, I'm having trouble displaying dynamic images using Razor syntax in an ASP.NET MVC 5 project.

I have the image path saved in a column in the database, named Image .

Below the code for my view:

@foreach (var item in Model) { 
<div class="item branding">
   <img src="@Html.DisplayFor(modelItem => item.imagem)" class="img-responsive" alt="" />
       <div class="works-overlay">
           <div class="wo-inner">
                <h4>@Html.DisplayFor(modelItem => item.nome)</h4>
           </div>
       </div>
</div>
}

But when the view is rendered, the src of the image is correct, the way it is saved in the database: ~ / Content / images / gallery / my-image-123.jpg . But the full image path is incorrect, as shown below:

http://localhost:9474/Albuns/~/Content/images/galeria/minha-imagem-123.jpg

Below is my controller, with a simple listing method.

public ActionResult Index()
        {
            return View(db.portifolio.ToList());
        }

Can anyone help me in how do I display the images correctly? The idea is to store in the database the path of the image on the server, after uploading it. And at the time of rendering, just take the path of the image.

If someone has a better view of storing / displaying images, please feel free to comment.

asp.net-mvc razor

asked by anonymous 29.12.2014 / 00:22

2 answers

1

After reading your comment in @CiganoMorrisonMendez's response, I realized that you are not using "routes" in the images, so I will assume that the images show this path http://localhost:9474/Albuns/~/Content/images/galeria/minha-imagem-123.jpg when you are accessing the http://localhost:9474/Albuns/ address and that the path ~/Content/images/galeria/minha-imagem-123.jpg is static.

This means that you are using relative when you should use absolute , you can modify your view , instead of using it like this:

<img src="@Html.DisplayFor(modelItem => item.imagem)" class="img-responsive" alt="" />

Use this way:

<img src="/@Html.DisplayFor(modelItem => item.imagem)" class="img-responsive" alt="" />

(I have little knowledge of "asp.net mvc", so I can not state the correct way to use src )

The entire code should look like this:

@foreach (var item in Model) { 
<div class="item branding">
   <img src="/@Html.DisplayFor(modelItem => item.imagem)" class="img-responsive" alt="" />
       <div class="works-overlay">
           <div class="wo-inner">
                <h4>@Html.DisplayFor(modelItem => item.nome)</h4>
           </div>
       </div>
</div>
}

29.12.2014 / 23:58

What is the difference between App.conf and Web.conf? I used an array in the parameter of a method and I do not know how to execute

score 4 · Accepted Answer

This is the wrong way to return an image to HTML since you are exposing a part of your infrastructure in the code.

The correct thing is you make a Action just to return the image, something like this:

    public FileResult Image(int id)
    {
        if (id != null)
        {
            var imagem = _db.Imagens.FirstOrDefault(x => x.ImagemId == id);
            if (imagem != null)
            {
                var imageFile = Server.MapPath("~/Content/images/galeria/" + imagem.imagem);
                return File(imageFile, "image/jpeg");
            }
        }

        return null;
    }

Usage:

<img src="~/Imagens/Image/5" alt="@item.nome" />

It may seem harder, but in terms of performance, it's almost the same and guarantees structural security.