Asp.net-mvc – How to display an image from a path in asp.net MVC 4 and Razor view

asp.net-mvcimagerazor

I have the following model:

public class Player
{


    public String ImagePath
    {
        get
        {
            return "~/Content/img/sql_error.JPG";
        }

    }

And, this is my .cshtml file:

@model SoulMasters.Models.Game.Player

@{
ViewBag.Title = "Game";
Layout = "~/Views/Shared/_GameLayout.cshtml";
var imagePath = @Model.ImagePath;
}

<fieldset>
<legend>Player</legend>

   <div class="display-field">
    @Html.DisplayFor(model => model.ImagePath)
</div>
@imagePath
<div style="padding:10px;">

    <img src=@imagePath alt="Sample Image" width="300px" />

    <img  alt="asd" >
        model.ImagePath;
    </img>
</div>
</fieldset>

The result is simple text:

~/Content/img/sql_error.JPG
~/Content/img/sql_error.JPG
Sample Image asd model.ImagePath;

Also, I have tried the following line, and it works:

<img src="~/Content/img/sql_error.JPG" alt="Sample Image" width="300px" />

How to display that image from path?
Could the image path be different based on settings? Any other ideas?

I don't really get it now on how razor syntax works.

Best Answer

In your View try like this

  <img src= "@Url.Content(Model.ImagePath)" alt="Image" />

Related Solutions

Asp.net-mvc – Can an ASP.NET MVC controller return an Image

Use the base controllers File method.

public ActionResult Image(string id)
{
    var dir = Server.MapPath("/Images");
    var path = Path.Combine(dir, id + ".jpg"); //validate the path for security or use other means to generate the path.
    return base.File(path, "image/jpeg");
}

As a note, this seems to be fairly efficient. I did a test where I requested the image through the controller (http://localhost/MyController/Image/MyImage) and through the direct URL (http://localhost/Images/MyImage.jpg) and the results were:

MVC: 7.6 milliseconds per photo
Direct: 6.7 milliseconds per photo

Note: this is the average time of a request. The average was calculated by making thousands of requests on the local machine, so the totals should not include network latency or bandwidth issues.

C# – How to create a dropdownlist from an enum in ASP.NET MVC

For MVC v5.1 use Html.EnumDropDownListFor

@Html.EnumDropDownListFor(
    x => x.YourEnumField,
    "Select My Type", 
    new { @class = "form-control" })

For MVC v5 use EnumHelper

@Html.DropDownList("MyType", 
   EnumHelper.GetSelectList(typeof(MyType)) , 
   "Select My Type", 
   new { @class = "form-control" })

For MVC 5 and lower

I rolled Rune's answer into an extension method:

namespace MyApp.Common
{
    public static class MyExtensions{
        public static SelectList ToSelectList<TEnum>(this TEnum enumObj)
            where TEnum : struct, IComparable, IFormattable, IConvertible
        {
            var values = from TEnum e in Enum.GetValues(typeof(TEnum))
                select new { Id = e, Name = e.ToString() };
            return new SelectList(values, "Id", "Name", enumObj);
        }
    }
}

This allows you to write:

ViewData["taskStatus"] = task.Status.ToSelectList();

by using MyApp.Common