Question

我的模型中有一个图像，我希望在我的视图中呈现。我从数据库中获取数据并将其放入我的模型中，并且我已经确保图像实际上也在模型中，因此它应该“只是”在视图中呈现图像。

这是我迄今为止在我看来尝试的内容：

<ul class="nav nav-tabs" data-tabs="tabs">
    @foreach (var item in Model)
    {
        <li id="nav" class="@(item == 1 ? "active" : "")"><a id="id2"
                                                                      href="#tab-@item.Well" 
                                                                      data-toggle="tab""
                                                                      data-id="@item.Id"
                                                                      data-img="@item.Image">@item</a></li>
    }
</ul>

<div id="tabs" class="tab-content">
<div id="tab-1" class="tab-pane">
    <h2 style="display: inline-block">ID: </h2>
    <h2 id="Header" style="display: inline-block"></h2>
    <br/>

    <h4 style="display: inline-block">Well#:</h4>
    <h4 id="Id" style="display: inline-block"></h4>

    <div id='chart_div'></div>
    <br/>

    <div class="row">
        <div class="col-md-3">
            <h3>Picture here</h3>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3" id="image"> //This is where I want to put my image from the model
            <img src="" width="250"/>
        </div>
    </div>
    <br/>
</div>
</div>

这是我的脚本：

<script type="text/javascript">
$("li a").click(function () {
    var id = $(this).data("id");
    var image = $(this).data("img");

    document.getElementById("Id").innerText = id;
    document.getElementById("image").value = Image;

});
</script>

我相信这个方法有效，因为我能够像这样获得“Id”并将其放入我的视图中，但我不太确定如何使用图像（位图）和这不起作用。任何提示都表示赞赏！

这是模型：

public class Model
{
    public string Id { get; set; }
    public Image Image { get; set; }
}

Answer 1

您可以使用图像的名称而不是对象图像

public class Model
{
    public string Id { get; set; }
    public String Image { get; set; }
}

我建议你的图片放在Content / Image文件夹中，图片名称就像“image.jpg”，所以你只需这样做：

<div class="row">
    <div class="col-md-3" id="image"> //This is where I want to put my image from the model
        <img src="@Html.Raw("Content/Image/"+item.Image)" width="250"/>
    </div>
</div>

Answer 2

设置img src而不是`document.getElementById（＆＃34; image＆＃34;）。value = Image;

Answer 3

OP从评论中接受的答案来自建议使用编码为base64字符串并在页面正文中内联的图像数据。这种方法现在适用于大多数浏览器。

http://www.binaryintellect.net/articles/e6d71127-1f12-4555-879b-6a859947eafa.aspx

ASP MVC将模型从模型分配到视图

3 个答案: