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;