Question

So I started a little home project in MVC 3 where I need to make a photo gallery.

I’ve been following a guide where I have been creating an Image folder inside my Content folder in where I’ve placed 2 pictures and also an xml file which contains a path and a description for each picture.

The XML is then loaded in from the filesystem into a XDocument and delivered to the View.

The view is then supposed to foreach through each image (Has 2 properties, path and description) and insert this path into an HTML src property and a href property.

I can see that the paths are delivered correctly, such as img1.png, to the view. However I have a problem getting the paths to work an display the picture. I think that href and the src cannot interpret the property strings correctly.

Or could it be that I need a relative path or Url.Content encode?

Here is the view

@foreach(var item in Model){
 <div>
   <a href="content/images/@item.path">
     <img src="content/images/@item.path"/>
   </a>
   <span>
    @item.description
   </span
</div>

I hope I’ve explained it properly else don’t hesitate to ask for more information.

My plan is to have a page that contains these pictures and then use the jQuery Ligthbox to be able to magnify the pictures and easily view through the picture.

Answer 1

Relative path won’t work here. Because of the routed path. For instance your current url is mydomain.com/Gallery/All and your image path given content/images/@item.path which will return mydomain.com/Gallery/All/content/images/@item.path and definitely your image is not in that location.

For this you the easier way is to use Url.Content like this:

@foreach(var item in Model){
 <div>
   <a href="@Url.Content("~/content/images/" + item.path)">
     <img src="@Url.Content("~/content/images/" + item.path)" />
   </a>
   <span>
    @item.description
   </span
</div>