Question

我在数据库字段中有一个图像标记，我想在MVC项目的索引和详细视图中显示图像。目前这两个页面只显示文本

该字段的视图代码为：

    <td>
        @Html.DisplayFor(modelItem => item.QRCode)
    </td>

如何编写视图页面以显示链接指向的图像而不是链接文本？

干杯，凯文。

Answer 1

根据此链接：displaying image from db in Razor/MVC3 两种可能性。

写一个控制器动作，而给定一个图像id会返回这个图像：

public ActionResult GetImage(int id)
{
    byte[] image = ... go and fetch the image buffer from the database given the id
    return File(image, "image/jpg");
}

然后：

<img src="@Url.Action("GetImage", "SomeController", new { id = item.Id })" alt="@item.CountryName" />

显然现在在您的初始模型中，您不需要Image属性。随后将在负责该操作的控制器操作中检索此信息。

另一种可能性是使用数据URI方案将图像嵌入为base64字符串，但它可能并未得到所有浏览器的广泛支持：

<img src="data:image/jpg;base64,@(Convert.ToBase64String(item.Image))" alt="@item.CountryName" />

在这种情况下，您不需要控制器操作，因为图像直接作为base64字符串嵌入到标记中。

快乐编码.. !!

Answer 2

以下代码适用于索引视图：

    <td>
        <img src="@Url.Content(item.QRCode)" alt="Image" />
    </td>

感谢您的帮助。

我现在遇到的问题是让图像显示在详细信息页面中。我试过的代码是：

    <dd>
        <img src=@Model.QRCode alt="" />
    </dd>

在详细信息页面上使用的其他列使用：

    <dd>
        @Html.DisplayFor(model => model.TestingFrequency)
    </dd>

但我已经尝试了很多代码组合，而我似乎无法让它发挥作用。

任何进一步的提示将不胜感激。

在asp视图中显示图像

2 个答案: