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

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

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

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

Answer 2

您可以使用图像的名称，而不是一个物体图像的

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

我建议你的图像放在内容/图片文件夹，图像名称就像“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 3

设置img src而不是`document.gif etElementById（“image”）。value = Image;