Image is not shown on the view Using ASP.NET MVC

I am trying to show my data after json Deserialization on the web.Every data working perfectly except the Images. It shows only image sign on the web but now the actual images.My Code for controller class in where I deserialized Json object is as follows-

public ActionResult PlaceInformation(City objCityModel)
{
    string name = objCityModel.Name;
    ViewBag.Title = name;
    var ReadJson = System.IO.File.ReadAllText(Server.MapPath(@"~/App_Data/" + name + ".json"));
    RootObject json = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<RootObject>(ReadJson);
    List<Poi> mycities = new List<Poi>();

    foreach (var item in json.poi)
    {
        Poi obj = new Poi()
        {
            Name = item.Name,
            Shorttext = item.Shorttext,
            GeoCoordinates = item.GeoCoordinates,
            Images = item.Images,

        };
        mycities.Add(obj);
    }

    ViewBag.Cities = mycities;
    return View();
}

Now in the view class I want to show every item from this json.But I am having error for images which I mentioned beside code. The error is:

An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately. Parser Error Message: Unexpected "foreach" keyword after "@" character. Once inside code, you do not need to prefix constructs like "foreach" with "@"

My code is -

@model  CallListService.Models.City
@{
    Layout = null;
}

@{
    ViewBag.Title1 = "Show Data";
}

 @foreach (var item in ViewBag.Cities)
 {
     <h2>@item.Name</h2>
     <p>@item.Shorttext</p>

     <p>@item.GeoCoordinates.Longitude</p>
     <p>@item.GeoCoordinates.Latitude</p>

    @foreach (var image in item.Images) //Parser Error
    {
        <img src=@image >
    }
}

Again if I only write in this way it works but image is not shown, only img sign is shown.

<img src=@item.Images>

I am not finding any solution for this.

This is screenshot of web page

SourceCode:

  <!DOCTYPE html>

  <html>
  <head>
  <meta name="viewport" content="width=device-width" />
  <title>PlaceInformation</title>
  </head>
  <body>
  <div> 

         <h2>Nordertor</h2>
         <p>The Nordertor is an old town gate in Flensburg, Germany, which was built around 1595. Today the landmark is used as a symbol for Flensburg.</p>
         <p>9.43004861</p>
         <p>54.79541778</p>
            <img src="System.Collections.Generic.List`1[System.String]" />
         <h2>Naval Academy M�rwik</h2>

         <p>9.45944444</p>
         <p>54.815</p>
            <img src="System.Collections.Generic.List`1[System.String]" />
         <h2>Flensburg Firth</h2>


         </p>
         <p>9.42901993</p>
         <p>54.7959404</p>
            <img src="System.Collections.Generic.List`1[System.String]" />


   </div>
   </body>
   </html>

I am using following json file to get all data

  {
   "poi":[
    {
      "Name": "Nordertor",
      "Shorttext": "The Nordertor is an old tows used as a symbol for Flensburg.",
      "GeoCoordinates": {
        "Longitude": 9.43004861,
        "Latitude": 54.79541778
      },
      "Images": [
        "https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Nordertor_im_Schnee_%28Flensburg%2C_Januar_2014%29.JPG/266px-Nordertor_im_Schnee_%28Flensburg%2C_Januar_2014%29.JPG"
      ]
    },
    {
      "Name": "Naval Academy Mürwik",
      "Shorttext": "The Naval Academy Mürwik is the main training e..",
      "GeoCoordinates": {
        "Longitude": 9.45944444,
        "Latitude": 54.815
      },
      "Images": [
        "https://upload.wikimedia.org/wikipedia/commons/thumb/f/fb/MSM-hauptgebaeude.jpg/400px-MSM-hauptgebaeude.jpg"
      ]
    },

    {
      "Name": "Flensburg Firth",
      "Shorttext": "Flensburg Firth or Flensborg Fjordg and the villages Munkbrarup, Langballig, Westerholz, Quern, Steinberg, Niesgrau, Gelting, and Nieby.\n\n",
      "GeoCoordinates": {
        "Longitude": 9.42901993,
        "Latitude": 54.7959404
      },
      "Images": [
        "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Flensborg_Fjord_ved_bockholmwik.jpg/400px-Flensborg_Fjord_ved_bockholmwik.jpg"
      ]
    }



    ]


}

Solution

Change the inner loop to:

foreach (var image in item.Images) //without the `@`
{
    <img src="@image" />  //with " and />
}

This should work if the specified file exists. (if it doesn't work, show the full error + html :-)