MVC 3 视图：如何使用包含字符串和模型数据的 src 创建 <image>

Posted 2023-02-26

【中文标题】MVC 3 视图：如何使用包含字符串和模型数据的 src 创建 <image>

【英文标题】：MVC 3 View: How to create <image> with src that contains both a string and model data

【发布时间】：2011-11-12 14:34:58

【问题描述】：

所以我在 MVC 3 中开始了一个小型家庭项目，我需要在其中制作照片库。

我一直在遵循一个指南，在该指南中，我在我的 Content 文件夹中创建了一个 Image 文件夹，其中我放置了 2 张图片以及一个包含每张图片的路径和描述的 xml 文件。

然后将 XML 从文件系统加载到 XDocument 中并传递到视图。

然后视图应该遍历每个图像（有 2 个属性，路径和描述）并将此路径插入 html src 属性和 href 属性。

我可以看到路径已正确传递到视图，例如 img1.png。但是，我在获取显示图片的路径时遇到问题。我认为 href 和 src 无法正确解释属性字符串。

还是我需要相对路径或 Url.Content 编码？

这里是风景

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

我希望我已经正确解释了它，否则请不要犹豫询问更多信息。

我的计划是有一个包含这些图片的页面，然后使用 jQuery Ligthbox 能够放大图片并轻松查看图片。

【参考方案1】：

相对路径在这里不起作用。因为路由路径。例如，您当前的网址是 mydomain.com/Gallery/All，而您的图片路径为 content/images/@item.path，它将返回 mydomain.com/Gallery/All/content/images/@item.path，而且您的图片肯定不在那个位置。

为此，您更简单的方法是像这样使用Url.Content：

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