Question

我已将动作控制器中的图像发送到视图，现在我正在应用foreach循环，但它在一个地方显示所有图像，而我想在第一个div显示第一个图像，在第二个等显示第二个等。

这是我的行动：

  public ActionResult show_pics2()
        {
            DBEntities db = new DBEntities();
            List<byte[]> images = (from f in db.Images                                 
                                   select f.ImageContent).ToList();
            return View(images);
        }

以下是我的观点：

@model IEnumerable<byte[]>

@{
    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);
                <img src="@imgsrc" style="max-width:100px;max-height:100px" />
            }
        }

请告诉我一种通过foreach循环在不同div中显示图像的方法。

喜欢

<div class="grid"> 
    <div class="grid__item" data-size="1280x857"> /* I want to display first image from db here******/ </div> 
    <div class="grid__item" data-size="1280x1280"> /* I want to display second image from db here ****/ </div>
    <div class="description description--grid"> 
</div>

Answer 1

渲染应该扭曲循环中<div>的{{1}}：

<img>

Answer 2

我知道它已经老了但也许对某人来说仍然有用。

这就是我所做的！

而不是在foreach循环中设置图像标记，

设置new List

并将图像src添加到新的List，如下所示

//This is the new list
List<string> images = new List<string>(); //it must be initialized before use

@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);
                images.Add(imgsrc);
            }
        }

然后您可以根据需要使用它并将其显示在您想要的位置。

<div class="grid"> 
    <div class="grid__item" data-size="1280x857"> 
        <img src="@images[0]" alt="sample" /> 
    </div> 
    <div class="grid__item" data-size="1280x1280"> 
        <img src="@images[1]" alt="sample" />
    </div>
    <div class="description description--grid"> 
</div>

我想在剃刀视图asp.net中显示不同div中模型中的图像

2 个答案: