在ASP.NET MVC中将图像从网络提供给View

时间:2013-11-04 13:33:31

标签: asp.net-mvc-4

我正在尝试从我的服务器加载图像,然后将它们加载到视图中:

var files = _directoryInfo.GetFiles()
            .Where(x => x.Name.Contains(request.WarrantyReference))
            .ToList();

model.Photos = files;

return View(model);

然后在View中做:

@if (Model.Photos.Count > 0)
{
    @Html.Partial("_Photos", Model.Photos)
}

_Photos:

@model List<FileInfo>
<div class="ui items">
    @foreach (var photo in Model)
    {
        <div class="item">
            <div class="image">
                <img src="@photo.FullName">
            </div>
        </div>
    }
</div>

但没有出现,我在控制台中收到以下错误:

Not allowed to load local resource: 
    file://my-server/dataphoto/WX0001 1.jpg 

所以我想知道是否可以暂时将照片存储在我的服务器上以便将它们提供给View,还是有另外一种解决方法?

2 个答案:

答案 0 :(得分:2)

将文件名(或某些标识符)存储在模型中。

<强>模型

class Model
{
    IList<string> Photos { get; set; }

创建一个HtmlHelper以显示您的照片图像。

在您的示例中,您可以将“WX0001 1.jpg”存储为照片标识符,然后当您从网络服务器中读取文件时,您会查看特定目录。

查看

@model List<FileInfo>
<div class="ui items">
    @foreach (var photo in Model)
    {
        <div class="item">
            <div class="image">
                @Html.PhotoImage(photo)
            </div>
        </div>
    }
</div>

public static MvcHtmlString PhotoImage(this HtmlHelper html, string id)
{
    var img = new TagBuilder("img");

    var your_image_byte_array = read_image_from_server_using_id;
    var base64 = Convert.ToBase64String(your_image_byte_array);

    img.Attributes.Add("src", String.Format("data:image/gif;base64,{0}", base64));

    return MvcHtmlString.Create(img.ToString());
}

或者,看一下使用Action方法显示图像...... Convert Byte Array to Image and Display in Razor View

答案 1 :(得分:1)

您需要将文件复制到用于服务/托管网站的AppPool的ASP.NET用户可以访问的位置。或者,为共享提供要读取的应用程序池帐户权限。另一种方法是读取文件并将它们存储在byte []中,最后在屏幕/视图上呈现它,而不实际将文件写入磁盘。