Question

我是新来的MVC.我保存了图像和一些数据，但无法显示已保存的图像。我想在主页面中显示所有已保存的图像。

模型：从模型中获取数据库列表

public List<Products> GenreList()
        {
}

控制器

public ActionResult MYsample()
{
    var MyList = storeDB.GenreList();
    var a= MyList.Count;

    if (a != null)
    {
        foreach (var li in MyList)
        {
            return File(li.fileContent, li.mimeType,li.fileName);
        }
    }
    return View(MyList);
}

查看

    @foreach (var item in Model)
    {
            <img src="@Url.Action("MYsample", "HomeController", new { id = item.ProductID })" alt="@item.Productname" />
    }

Answer 1

您可以首先编写一个控制器操作，将图像提供给响应流：

public ActionResult Image(int id)
{
    // you should add a method to your repository that returns the image 
    // record from the id
    Products image = storeDB.Get(id);
    return File(image.fileContent, image.mimeType);
}

然后在主控制器操作中将图像列表发送到视图：

public ActionResult MySample()
{
    var model = storeDB.GenreList();
    return View(model);
}

然后在强类型视图中循环遍历图像，并通过将其<img>属性指向新创建的控制器操作为每个图像生成src标记：

@model MyList
@foreach (var li in MyList)
{
    <img src="@Url.Action("Image", new { id = li.Id })" alt="" />
}

如果您不希望单独的控制器操作将查询数据库并从ID中检索图像记录，则可以使用data URI scheme。请记住，并非所有浏览器都支持此功能。

所以我们的想法是你的控制器动作会将图像数据发送到视图：

public ActionResult MySample()
{
    var model = storeDB.GenreList();
    return View(model);
}

然后在强类型视图中，您可以遍历列表并生成正确的<img>标记：

@model MyList
@foreach (var li in MyList)
{
    <img src="src="data:@(li.mimeType);base64,@(Html.Raw(Convert.ToBase64String(li.fileContent)))" alt="" />
}

如何使用MVC3从db显示多个图像

1 个答案: