title: Displaying an uploaded image in MVC 3 Razor
body: <p>Well, this newbie is doing something wrong when displaying images uploaded to the server:</p>
  
  <p>model:</p>
  
  <pre><code>public class Person
  {
      public int ID { get; set; }
      public string Name { get; set; }
      public string ImageUrl { get; set; }
  }   
  </code></pre>
  
  <p>controller (upload - called by the [HttpPost] public ActionResult Create):</p>
  
  <pre><code>public void Upload(Person person)
  {
      var image = WebImage.GetImageFromRequest();
      var filename = Path.GetFileName(image.FileName);
      var path = Path.Combine(Server.MapPath("~/App_Data/Uploads/Fotos"), filename);
      image.Save(path);
      person.ImageUrl = Url.Content(Path.Combine("~/App_Data/Uploads/Fotos", filename));
  }
  </code></pre>
  
  <p>create view:</p>
  
  <pre><code>...
  @using (Html.BeginForm("Create", "Person", FormMethod.Post, new { @encType = "multipart/form-data" }))
  {
      ...
      @FileUpload.GetHtml(initialNumberOfFiles: 1, allowMoreFilesToBeAdded: false, includeFormTag: false, uploadText: "image")
      ...
      &lt;div&gt;
          &lt;input type="submit" value="Create" /&gt; |
          @Html.ActionLink("Back", "Index")
      &lt;/div&gt; 
  }
  </code></pre>
  
  <p>So far, so good, the image is uploaded to the folder and the url is saved</p>
  
  <p>Now, I want to see it in the Detail View</p>
  
  <p>detail view:</p>
  
  <pre><code>&lt;div class="display-foto"&gt;
      &lt;img src="@Url.Content(Server.MapPath(Model.ImageUrl))" alt="IMAGE" /&gt;                         
  &lt;/div&gt;
  </code></pre>
  
  <p>Viewing the generated code, everything seems to be alright:</p>
  
  <pre><code>&lt;img src="D:\Users\x\Documents\Visual Studio 2010\Projects\CMI_AD\CMI_AD\App_Data\Uploads\Fotos\_nofoto.jpg" alt="IMAGE" /&gt;
  </code></pre>
  
  <p>But the fact is that nothing appears on the screen except the text "IMAGE".</p>
  
  <p>What am I doing wrong?</p>
  
  <p>P.S. I've tried without the Server.MapPath, using the relative address "~\App_Data\Uploads\Fotos_nofoto.jpg" and the result is the same.</p>
  
  <p>--- EDIT ---</p>
  
  <p>@kmcc049: I've tried your suggestion creating a helper</p>
  
  <pre><code>public static class MyHelpers
  {
      public static IHtmlString MyImage(this HtmlHelper htmlHelper, string url)
      {
          var urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
          var img = new TagBuilder("img");
          img.Attributes["alt"] = "[IMAGE]";
          img.Attributes["src"] = UrlHelper.GenerateContentUrl(url, htmlHelper.ViewContext.HttpContext);
          return MvcHtmlString.Create(img.ToString(TagRenderMode.SelfClosing));
      }
  }
  </code></pre>
  
  <p>the call in the view:</p>
  
  <pre><code>@Html.MyImage(Model.ImageUrl)
  </code></pre>
  
  <p>the generated code is</p>
  
  <pre><code>&lt;img alt="[IMAGE]" src="/App_Data/Uploads/Fotos/_nofoto.jpg" /&gt;
  </code></pre>
  
  <p>but the result is the same: no image :(</p>
  
  <p><strong>--- SOLVED ---</strong></p>
  
  <p>Apparently the App_Data is not a good location to save uploaded files because accessing them will result an Error 403 - Forbidden. I move the files to ~/Uploads/Fotos and it works.</p>