title: How to return image file using custom route to cache the image file?
body: <p>I'm having a hard time figuring out on how to cache the image from a blob stream.<br>
  This is my first code and it works to download the return the image file:  </p>
  
  <p><strong>HTML PART:</strong></p>
  
  <pre><code>&lt;img src="@Url.Action("GetImage", "Asset")?photoId=@SessionData.ProfilePic.PhotoID&amp;type=3"/&gt;  
  </code></pre>
  
  <p><strong>CONTROLLER:</strong>  </p>
  
  <pre><code>public ActionResult GetImage(long photoId, PhotoType type)
  {   
      byte[] img = &lt;Code that fetches image byte from blob stream&gt;;
      return File(img, "image/png");            
  }
  </code></pre>
  
  <p>But this fail to cache in browser.<br>
  I am thinking that if the url seems to be like this:  </p>
  
  <pre><code>http://stackoverflow.com/Asset/GetImage/1/2  
  </code></pre>
  
  <p>the image can now be cache?<br>
  So I create another route:  </p>
  
  <pre><code>routes.MapRoute(
      "Upload",
      "Asset/GetImage/{photoId}/{type}",
      new { controller = "Asset", action = "GetImage" }
  );
  </code></pre>
  
  <p>and access the image like this:  </p>
  
  <pre><code>http://stackoverflow.com/Asset/GetImage/1/2
  &lt;img src="http://stackoverflow.com/Asset/GetImage/1/2" /&gt;
  </code></pre>
  
  <p>But I always get:  </p>
  
  <pre><code>Failed to load resource: the server responded with a status of 404 (Not Found)   
  </code></pre>
  
  <p>Now my questions are:  </p>
  
  <ol>
  <li>Am I right of thinking that when the url is formatted like this <code>http://stackoverflow.com/Asset/GetImage/1/2</code> it can now be cache by the browser? </li>
  <li>Why do I get this error? <code>Failed to load resource: the server responded with a status of 404 (Not Found)</code> What's wrong with my route?  </li>
  </ol>
  
  <p>Hope someone could help.</p>
  
  <p><strong>EDIT</strong>  </p>
  
  <p>This is my full Routes:  </p>
  
  <pre><code>routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  
  routes.MapRoute(
      "Upload",
      "Asset/GetImage/{photoId}/{type}",
      new { controller = "Asset", action = "GetImage" }
  );
  
  var route = routes.MapRoute(
          "Gallery",
          "",
          new { controller = "Auth", action = "Login" },
          new[] { "Project.Areas.Gallery.Controllers" }
      );
  
  route.DataTokens["area"] = "Gallery";  
  </code></pre>
  
  <p>And still getting the error <code>Failed to load resource: the server responded with a status of 404 (Not Found)</code> , what could be wrong ?  </p>
  
  <p><strong>EDIT2</strong>  </p>
  
  <p>The list of meta tags I've used:  </p>
  
  <pre><code>&lt;meta charset="utf-8"&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
  &lt;meta name="description" content=""&gt;
  &lt;meta name="author" content=""&gt;
  &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
  &lt;meta http-equiv="imagetoolbar" content="false"&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  </code></pre>