使用 ASP.NET MVC 的视图上未显示图像答案

【问题标题】：Image is not shown on the view Using ASP.NET MVC使用 ASP.NET MVC 的视图上未显示图像
【发布时间】：2016-02-10 19:13:15
【问题描述】：

我试图在网络上显示 json 反序列化后的数据。除图像外，每个数据都可以正常工作。它仅显示网络上的图像符号，但现在显示实际图像。我在其中反序列化 Json 对象的控制器类的代码如下-

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

现在在视图类中，我想显示这个 json 中的每个项目。但是我在代码旁边提到的图像出现错误。错误是：

解析服务此请求所需的资源时出错。请查看以下特定的解析错误详细信息并适当地修改您的源文件。解析器错误消息：“@”字符后出现意外的“foreach”关键字。进入代码后，您无需在“foreach”之类的结构前面加上“@”

我的代码是 -

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

再次，如果我只以这种方式编写它可以工作但不显示图像，只显示 img 符号。

<img src=@item.Images>

我没有找到任何解决方案。

This is screenshot of web page

源代码：

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

我正在使用以下 json 文件来获取所有数据

  {
   "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"
      ]
    }



    ]


}

【问题讨论】：

<img src=@item.Images> 是如何呈现为 html 的？我是说;输出的 html 是什么样的？
您在 foreach 循环中遇到什么解析器错误？
@Stefan。只有标志。不是图片
请发布 html 输出，<img src=.... />。或者，如果甚至没有 <img.../>，请发布它生成的 html。
检查那个元素，看看你对 src 有什么价值。

标签： c# asp.net json asp.net-mvc imagesource

【解决方案1】：

图像标签总是期望该图像的路径

<img src="./images/name.jpg" />

或

<img src="http:/wwww.sitename.com/images/name.jpg" />

你的图片包含什么图片路径或图片字节？

如果它包含图像字节，那么它必须通过创建一个中间页面来单独呈现

【讨论】：

我正在使用 url 图片。所以图片直接来自url
能否请您右键单击该图像并提供添加的路径或您能否检查正在生成的图像 html 的视图源
嗨，我从 json 文件中获取了所有这些图像。好的，我在这个问题上添加我的 json 文件。
右击你的页面，点击查看源代码，给我后台生成的HTML代码
我在我的问题中添加了这个查看源代码

【解决方案2】：

将内循环改为：

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

如果指定的文件存在，这应该可以工作。（如果它不起作用，显示完整的错误 + html :-)

【讨论】：