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.

Answer 1

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.