How to display an image from a path in asp.net MVC 4 and Razor view?

Question

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.

Answer 1

In your View try like this

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