图像未从主题布局中显示（Orchard CMS）

Question

我正在尝试为 Orchard CMS 创建主题。我的模板不是为此制作的，因此在显示 Layout.cshtml 中的图像时遇到一些问题。

这是我的网络服务器上当前的文件夹结构（仅主题文件夹结构）：

Theme/Content/Images/Image.jpg 主题/视图/Layout.cshtml Theme/Styles/Site.css

以下行不显示图像（位于 Layout.cshtml 中）：

但是，此行确实显示图像（位于 Site.css 中）：

background-image:url('../Content/Images/bgLines.png');

我相信问题是 Layout.cshtml 不显示来自 Theme/Views/Layout.cshtml 的图像，而是显示来自其他位置的图像。如果有人知道那个位置是什么或者如何覆盖它，我将不胜感激。

Answer 1

我可能有点晚了，但这可能对其他人有帮助。

要获取当前主题，然后构建动态路径（而不是绝对路径），请使用：

WorkContext.CurrentTheme：获取当前工作主题 ExtensionDescriptor。

然后将其提供给 Html.ThemePath URL 生成器：
前任。

Html.ThemePath(WorkContext.CurrentTheme, "/Content/Images/SomeImage.png")

玩得开心！

此致，
蒂亚戈.

Answer 2

在 Layout.cshtml 中添加图像时，您应该使用主题的完整路径（例如 /Themes/My.Theme/Content/Images/MyImage.jpg）。请记住，您在 [img] 标签中提供的路径相对于浏览器中的 URL，而不是服务器上的路径。在 MVC 中，这些几乎从来都是不平等的。

Layout.cshtml 视图文件作为每个请求的一部分加载，因此放置在其中的相对路径几乎总是会中断。

假设您有两个 Orchard 页面：site.com/mypage 和 site.com/something/mypage。 Layout.cshtml 在两者中都会呈现。当您访问第二个时，适用于第一个的相对 URL 肯定会中断。​​

CSS 样式表通过指定 /Themes/YourTheme/Styles 文件夹中的物理文件的绝对路径直接加载（默认） ，因此在这种情况下相对 URL 将起作用。

华泰

Answer 3

感谢蒂亚戈提供的解决方案。我认为这实际上是正确的解决方案，而不是链接完整路径，我认为这需要 Orchard 站点位于域的根目录上。

原始问题的完整图像参考如下所示：

<img src="@Url.Content(Html.ThemePath(WorkContext.CurrentTheme, "/Content/Images/bgBig.jpg"))" alt="Big background image" />

Answer 4

我很惊讶没有人提到您在图像/脚本/样式所在的文件夹中需要以下 web.config (请参阅果园文档）

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.web>
    <httpHandlers>
      <!-- iis6 - for any request in this location,
           return via managed static file handler -->
      <add path="*" verb="*" type="System.Web.StaticFileHandler" />
    </httpHandlers>
  </system.web>
  <system.webServer>
    <handlers accessPolicy="Script,Read">
      <!-- iis7 - for any request to a file exists on disk,
           return it via native http module.
           accessPolicy 'Script' is to allow for a managed 404 page. -->
      <add name="StaticFile" path="*" verb="*" modules="StaticFileModule"
           preCondition="integratedMode" resourceType="File"
           requireAccess="Read" />
    </handlers>
  </system.webServer>
</configuration>

此外，正如其他人指出的那样，这是定位图像的最可靠方法：

<img src="@Url.Content(Html.ThemePath(WorkContext.CurrentTheme, "/Content/Header.png"))" />

Answer 5

如果您检查源，它应该向您显示它试图在哪里找到该图像但失败了。这很可能是相对路径有问题，请尝试 css 中的绝对路径，看看是否是问题所在。没有实际的网站，我无法确定。