title: How to display an dynamic image name with Razor
body: <p>I'm rather new to MVC and have recently started a Asp.Net MVC3 project, using the Razor view engine.</p>
  
  <p>At the moment I'm having trouble with outputting an image name into an html img tag with Razor.</p>
  
  <p>Say I have a Car class in my model, with a string property called ModelName. I also have a folder with images of the car model, they are named after the car model so that I can by convention show the image of a specific model, by just using the name. </p>
  
  <p>From my controller I pass down a collection of Cars to my view and do the following to show a list of car model images:</p>
  
  <pre><code>@foreach (var item in Model) {
  &lt;img src='@item.ModelName.png' /&gt;
  }
  </code></pre>
  
  <p>However if I try to run this, I get the error:</p>
  
  <blockquote>
    <p>Compiler Error Message: CS1061:
    'string' does not contain a definition
    for 'png' and no extension method
    'png' accepting a first argument of
    type 'string' could be found (are you
    missing a using directive or an
    assembly reference?)</p>
  </blockquote>
  
  <p>I also tried </p>
  
  <pre><code>    @foreach (var item in Model) {
       &lt;img src='@{item.ModelName}.png' /&gt;
      }
  </code></pre>
  
  <p>But that results in:</p>
  
  <blockquote>
    <p>Compiler Error Message: CS1528: Expected ; or = (cannot specify constructor arguments in >declaration)
    Source Error:</p>
    
    <p>Line 84:             #line default
    Line 85:             #line hidden Line
    86: WriteLiteral(".png\'
    ">\r\n"); Line 88:</p>
  </blockquote>
  
  <p>I can get around it by doing:</p>
  
  <pre><code>@foreach (var item in Model) {
       string imageName = string.Format("{0}.png", item.ModelName);
       &lt;img src='@imageName' /&gt;
      }
  </code></pre>
  
  <p>But that feels quite clunky, surely there must be a better way??</p>