mvc @Url.Content.......images not displaying

Question

I am using mvc EF6 to display images from SQL server database,

We have saved the image to the local Folder, and its URL to the Database.

doing fine

image url save like

C:\Users\Naveed\Desktop\EndToEnd\UserImages\6360831428333175151-posterior-teeth.jpg

then i use below code in my view to display the Images.

@model IEnumerable<iSmileFinal.Models.Imaging>
@if (Model != null)
{
<div class="adsm-sec">
    @foreach (var vad in Model)
    {
        <div id="img">
            <div class="adsm-image-wraper">
                @*@{string imagePath = Url.Content("~/UserImages/");}*@

                @*<img src='@Url.Content("~/UserImages/")' alt="no photo" />*@

                <img src='@Url.Content(vad.ImageUrl)' alt="no photo" class="adsm-image" />

                <img src='@Url.Content(String.Format(vad.ImageUrl))' style="width:200px; height:90px;" />
            </div>
        </div>

       <img>@Html.DisplayFor(modelItem => vad.ImageUrl)

        @Html.DisplayFor(modelItem => vad.ImageType)

        @Html.DisplayFor(modelItem => vad.Comments)
    }
</div>

}

but it is not displaying the images. it displays like (See Image)

i use Google Chrome and FF.

you dont need Url.Content if you have the full path. just use ` — JamieD77, Sep 01 '16 at 15:58
it's a bad idea anyway and security risk.. easiest is to just put the files in your web sites directory or create a virtual directory on your web server that points to your UserImages folder and reference the virtual directory — JamieD77, Sep 01 '16 at 16:20

Shyju · Accepted Answer · 2016-09-01T16:16:56.223

3

C:\Users\Naveed\Desktop\EndToEnd\UserImages\6360831428333175151-posterior-teeth.jpg

This is not an image url

This is a physical path to the file. You should not be storing this in your database when uploading an image. Instead you should be storing the url/unique file identifier relative to your web app.

Something like yourSite/UserImages/uniqueFileName.jpg or just uniqueFileName.jpg"

Now when you render the page, read this value from your db table and use this relative url as the image src property. If you are simply storing the filename, you probably need to append it to the storage file location "UserImages\"+yourFileNameVariable; and use that to make it relative

If youe UserImages directory is in the web root of your application, you can do this

<img src="@Url.Content("~/UserImages/yourFileName.png")"/>

If you are storing file name in your db table, replace yourFileName.png with your c# variable /model property name.

For example, If your model/viewmodel has a property called ImageNamewhich has the unique file name(just the file name), you can do like this

<img  src="@Url.Content("~")/Uploads/@Model.ImageName"/>

@Url.Content("~") will return the relative path to the web root

EDIT : As per the comment.

To show all items. you can move this image tag inside your loop.

@model IEnumerable<iSmileFinal.Models.Imaging>
@if (Model != null)
{
<div class="adsm-sec">
    @foreach (var vad in Model)
    {
        <img src="@Url.Content("~")/Uploads/@vad.ImageName" />
    }
 </div>
}

Assuming Imaging class has an ImageName property in which you will load the file name stored under ~/Uploads directory.

edited Sep 01 '16 at 16:16

answered Sep 01 '16 at 15:58

Shyju

214,206
104
411
497

@Shyju......this is what i am getting after using your solution from my other question yesterday. could you please let me know how to resolve it? – Muhammad Naveed Sep 01 '16 at 16:03
string path = DateTime.Now.Ticks + file.FileName; var fullPath = Path.Combine(Server.MapPath("~/UserImages/"), path); – Muhammad Naveed Sep 01 '16 at 16:05
See my updated answer (last part). You should be storing the filename/relative name only – Shyju Sep 01 '16 at 16:06
................how to display all images? – Muhammad Naveed Sep 01 '16 at 16:12
Just move it inside your loop. See the updated answer. – Shyju Sep 01 '16 at 16:17
with this .............there is no display...............the path i am getting is like..... – Muhammad Naveed Sep 01 '16 at 16:24
As i **clearly mentioned in the answer**, you should not be storing the full physical path. Store either a relative url or just the file name! – Shyju Sep 01 '16 at 16:24
sorry sorry.......my mistake.....i got it, Thanks a million, let me try – Muhammad Naveed Sep 01 '16 at 16:29
now i am getting this .......Image saved.....Url Saved.......but no image display .............. – Muhammad Naveed Sep 01 '16 at 16:46
Why do you have `//` ? Also to verify it works, you can simply copy the image src value and try to access it in a browser (ofcourse with the site name infront of that) – Shyju Sep 01 '16 at 16:48
("~")/Upload..............just removed this "/" ........and i am Dancing – Muhammad Naveed Sep 01 '16 at 16:56

mvc @Url.Content.......images not displaying

1 Answers1

Linked