Display dynamic images using Razor

Asked

Viewed 3,862 times

2

Hello, I’m having trouble displaying dynamic images using Razor syntax in an Asp.net MVC 5 project.

I have the image path stored in a column in the database, named Imagery.

Below the code of 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. However the complete image path is incorrect, as shown below:

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

Below follows my controller, with a simple listing method.

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

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

If someone has a better opinion of storing/displaying images, please comment.

asp.net-mvc razor
  • 1

    Apparently your Model is concatenating your current page with the database string (which in this case is the image path). Who is formatting the url? It would be the Controller or the Model (I believe your Model only uses get; set;)?

  • Yes, my Model is just using get; set;

  • Add the method you are using to concatenate your question?

  • 1

    Erico, in my project I do as follows: in the attribute src tag image I put it like this and it works, for example: src="@Model.Photo" and that way I can take the photo in my project and display it.

  • @Guilhermenascimento added the result action method. It’s a simple listing, where I take the database record, and one of them is the image path on the server.

  • But this is the method that is causing the problem?

  • @Guilhermenascimento basically the problem is that I can not display my images. I usually store the path of it in the bank. I used this in the webforms, and in the src tag I used src='<%# Eval("image")%>'... but in the mvc I did not succeed in thinking the same way.

  • When I say method I mean the controller function, this index function is the one you use to concatenate the path with /albuns/

  • Do not concatenate, I have stored in the database the image path "~/Content/images/gallery/my-image-123.jpg"

  • I understand @Ericosouza, is that because you are using MVC I believe that we all thought that the images worked with "routes", but after seeing the "update" of your question and your comment, I believe the path displayed on src be "static". See my answer.

Show 5 more comments

2 answers

4


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

What’s right is you make one Action just to return the image, sort of 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;
    }

Use:

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

It may seem more laborious, but in terms of performance, it’s almost the same thing and it guarantees you structural security.

  • Okay, I’m just a little confused, this "action," do I create on my controller? And how do I control the image of each record, and my Index action, I have only one: Return View(db.portifolio.Tolist()); ?

  • 1

    Yes, creates the Action in the Controller. The control is in the foreach, where you send the Id to the Image Action in the Controller.

  • When I used webforms projects, I used to store the full path where the image is saved on the server. Using Asp.net mvc, I don’t need to do this, by the action you wrote as an example, I can simply store the name of it, and create the image path... correct?

  • 1

    After a few attempts and a good understanding, it all worked out right and worked correctly this way. Thanks @Ciganomorrisonmendez vlw

1

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

That means you’re using way relative when you should use absolute, you can modify your view, instead of wearing 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’t say the right way to use src)

The whole 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>
}
  • 1

    This does not solve the problem. The problem is directory exposure Content, that is static and not manipulated by routes, allowing attacks and improper access.

  • Thanks @Ciganomorrisonmendez, but this is exactly why I even commented that there was no understood the problem, because I really thought he was using "routes" and I agree with his answer, but here I just answered where his fault is, due to my low knowledge of "Asp.net mvc", I can not formulate "tips", just indicate the fault.

  • Guys, I’m sorry if I’m still a little confused. According to @Ciganomorrisonmendez’s reply and Guilherme’s comments, finally the problem is that I wanted to use a technique similar to the one I used when I use webforms, but now I’m beginning to understand that I should use "routes" in the images, which is a better way to display the images of my records.... right?

  • 1

    @Ericosouza I do not know in the matter of "security", but in the matter of creating "Canonical url" and even reducing the size of the "path" visible to the client, I certainly agree with the use of "routes". In the case the Gypsy said to do the "work" treatment in the "for" within the "View", but I believe that maybe you can do this in the "Controller" in an isolated method and reuse this method for other "sites", but if you will use only in this View, So I think you can work perfectly within View itself. Of course this is just my opinion.

Browser other questions tagged asp.net-mvc razor

You are not signed in. Login or sign up in order to post.