主题布局中的图片未显示（Orchard CMS）

Question

我正在尝试为Orchard CMS创建主题。我有一个没有为它制作的模板，所以在Layout.cshtml中显示图片时遇到了一些问题。

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

Theme/Content/Images/Image.jpg Theme/Views/Layout.cshtml Theme/Styles/Site.css

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

<img src="../Content/Images/bgBig.jpg" alt="Big background image" />

然而，此行会显示图像（位于Site.css中）：

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

我认为问题在于Layout.cshtml无法从Theme/Views/Layout.cshtml中显示图像，而是从其他位置显示。如果有人知道那个位置或如何覆盖它，我将不胜感激。

- wegelagerer

Answer 1

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

要获取当前主题并构建动态路径（而不是绝对路径），请使用以下方法：

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

然后将其提供给Html.ThemePath URL生成器： 例如：

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

玩得开心！

最好的问候， Tiago。

- Tiago

---

CSS中的路径怎么样？ - autonomatt

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将起作用。

希望对你有所帮助。

- Piotr Szmyd

---

非常感谢！那就是解决方案！除了Orchard CMS官方文档，您能否推荐我其他的文档来进行主题定制？ - wegelagerer

有几个博客专注于Orchard开发和填补缺失的文档部分:)我建议阅读这些博客。 - Piotr Szmyd

忘记列出它们了:) Bertrand Le Roy 的 - http://weblogs.asp.net/bleroy/，我的 - http://www.szmyd.com.pl，Nick Mayne 的 - http://www.themayneissue.com/ HTH - Piotr Szmyd

Answer 3

感谢Tiago提供的解决方案。我认为这实际上是正确的解决方案，而不是链接完整路径，这需要Orchard网站在域的根目录下。

原问题的完整图像引用如下：

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

- Alexander Rechsteiner

Answer 4

我很惊讶地发现没有人提到你需要在存放图像/脚本/样式的文件夹中拥有以下web.config文件（请查看Orchard文档）

<?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"))" />

- Mohammad Sepahvand

---

我添加了这个web.config文件，现在我的图片可以正常显示了，但是我的多个css文件出现了500错误，例如：http://localhost:30321/Themes/ImmoWhat/Styles/site.css (GET Error 500)。 - Jerome2606

相反，我实际上必须从我的/Styles/Images文件夹中删除web.config文件才能使其正常工作。 - James

Answer 5

如果你检查源代码，它应该告诉你它试图找到哪个图片并失败了。很可能是相对路径出了问题，请尝试在CSS中使用绝对路径以查看是否出现问题。没有实际的网站，我不能确定。

- Sam