Displaying an Image from view-model. MVC

Question

Hey guys,

My issue is similar to This question but different enough that I feel it warrants a separate thread.

So I have the following 'view';

// A load of other calls to Model.Title, Model.Description, Model.DownloadURL 
// which work fine so no issues with actually ViewModel communication.
<fieldset>
    <div id="projectDiv">
                      // Model.ThumbnailPath is a fully qualified path to an image
                      // stored on disk, within another folder in another project.
        <img src="<%= Model.ThumbnailImagePath %>" alt="Thumbnail Image" height="100px" width="100px" />

    </div>

Sadly however, all i get is an outlined white box...no image.

I have debugged the application and intercepted the file path variable thats getting sent into the ViewModel and pasted that into my computer explorer. I get the image I was expecting.

I have tried hard-coding this file path into the 's source attribute and still, an empty white box.

There are many other properties within this Viewpage that are being displayed perfectly, so communication through the application layers is working.

Any ideas why this might not function as expected ?

Thank you for your time.

Answer 1

The src attribute needs to be a URL, not a file path. If you can, put the images in your content/images folder and reference the url to it there. If not, i.e., the file needs to stay where it is, then consider having a controller that can read the image and return it as a ContentResult with the correct mime type and use the url for the controller/action/image-identifier as the src attribute for the image.

<img src="<%= Url.Content( "~/images/thumbnails/" + Model.ThumbnailName ) %>" ...

or

<img src="<%= Url.Action( "thumbnail", "image", Model.ImageID ) %>" ...

Answer 2

While this doesn't make total sense to reply to an answer in this box, i need to write code.

I don't really understand what you would write in the controller side of things in your suggested scenario tvanfosson.

Here is what exists:

A folder of Images in: MySolution.Models.Entities.Images.ProjectThumbnails. Within this folder exists a number of bmp's all named according to the GUID of the entity they belong to.

Now I have a controller in: MySolution.Controllers.ProjectsController with a method as follows:

 public ContentResult ProjectThumbnails(Guid Id)
 {
     ContentResult result = new ContentResult();

     Project project = projectService.GetProject(Id);
                      //This is still a fully qualified disk location path
     result.Content = project.ThumbnailImagePath; 
     return result;            
 }

Then within the view:

<img src="<%= Url.Content(~/ProjectThumbnails/" + Model.Id) %>" />

However, i am getting no intellisense from typing "Url.Content" which is rarely a good thing, and also, what i run the site i get the following error:

"Compiler Error Message: CS1010: Newline in constant" With the error pointing to the line.

Could you clarify what I may be missing here ? Considering how easy MVC makes most other aspects of making websites, it is ludicrous how difficult image handling is.