图像未显示在使用 MVC ASP.NET 视图上

本文关键字：ASP NET 视图 MVC 显示 图像 | 更新日期: 2023-09-27 18:34:08

我正在尝试在网络上显示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>

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

这是网页的屏幕截图

源代码：

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

    ]

}

图像未显示在使用 MVC ASP.NET 视图上

图像标记将始终需要该图像的路径

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

或

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

您的图像包含图像路径或图像字节是什么？

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

将内部循环更改为：

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

如果指定的文件存在，这应该有效。(如果它不起作用，则显示完整的错误 + html ：-(

相关文章：