CODEWITHSUNDEEP
asp.net-mvc-4
CallumVass
CallumVass

Reputation: 11456

Serve up images from network to View in ASP.NET MVC

I'm trying to load images from my server and then load them to a view:

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

model.Photos = files;

return View(model);

Then in the View im doing:

@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>

But nothing appears, I get the following error in the console: 

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

So I was wondering if it is possible to store the photos temporarily on my server to serve them to the View or is there another way around this?

Upvotes: 1

Views: 1925

Answers (2)

David
David

Reputation: 15360

Store the file names (or some identifier) in your Model.

Model

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

Create an HtmlHelper to display your photo image.

In your example you could store "WX0001 1.jpg" as the photo identifier then when you read the file from the network server you look in a specific directory.

View

@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());
}

Alternatively, have a look at using an Action method to display the image... Convert Byte Array to Image and Display in Razor View

Upvotes: 2

Ahmed ilyas
Ahmed ilyas

Reputation: 5832

you would need to copy the files somewhere where the ASP.NET user being used for the AppPool serving/hosting the website has access to. Alternatively, give the share the app pool account privileges to read. One other way would be to read the files and store them in a byte[] and finally render it on the screen/view without actually writing the files to disk.

Upvotes: 1

Related Questions