title: I want to display Images present in model in different divs in razor view asp.net
body: <p>I have send images from actioncontroller to view and now i am applying foreach loop but it's displaying all of images in one place whereas i want to display first image at first div and second in second etc.</p>
  
  <p>here's my action:</p>
  
  <pre><code>  public ActionResult show_pics2()
          {
              DBEntities db = new DBEntities();
              List&lt;byte[]&gt; images = (from f in db.Images                                 
                                     select f.ImageContent).ToList();
              return View(images);
          }
  </code></pre>
  
  <p>Here's my view:</p>
  
  <pre><code>@model IEnumerable&lt;byte[]&gt;
  
  @{
      ViewBag.Title = "Portfolio";
  }
  
  @{ var imgsrc="";}
  @{ int i = 0;
       }
  
  
          @foreach (var item in Model)
          {
  
              if (i == 0)
              {
                  // converting to string
                  var base64 = Convert.ToBase64String(item);
                  imgsrc = string.Format("data:image/jpg;base64,{0}", base64);
                  &lt;img src="@imgsrc" style="max-width:100px;max-height:100px" /&gt;
              }
          }
  </code></pre>
  
  <p>Please tell me a way to display images in different divs through foreach loop.</p>
  
  <p>Like </p>
  
  <pre><code>&lt;div class="grid"&gt; 
      &lt;div class="grid__item" data-size="1280x857"&gt; /* I want to display first image from db here******/ &lt;/div&gt; 
      &lt;div class="grid__item" data-size="1280x1280"&gt; /* I want to display second image from db here ****/ &lt;/div&gt;
      &lt;div class="description description--grid"&gt; 
  &lt;/div&gt; 
  </code></pre>