Las imágenes no se muestran desde el diseño del tema (Orchard CMS)

Question

Estoy tratando de crear el tema para Orchard CMS. La plantilla que tengo no está hecha para eso, así que tengo algunos problemas para mostrar imágenes de Layout.cshtml.

Ésta es la estructura de la carpeta actual en mi servidor web (estructura de carpeta de temas solamente):

temáticos/contenido/Imágenes/imagen.jpg temáticos/Vistas/Layout.cshtml temáticos/Estilos/Site.css

la siguiente línea no muestra la imagen (que se encuentra en Layout.cshtml):

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

sin embargo, esta línea no mostrar la imagen (situado en Site.css):

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

Creo que el problema es que Layout.cshtml no muestra la imagen desde temático/Vistas/Layout.cshtml, pero desde el otro lugar. Si alguien sabe cuál sería esa ubicación o cómo anularla, estaría agradecido.

Answer 1

Al agregar imágenes en Layout.cshtml debe usar la ruta completa a su tema (por ejemplo, /Themes/My.Theme/Content/Image/MyImage.jpg). Recuerde que las rutas que proporciona en la etiqueta [img] son ​​en relación con la URL en el navegador, no en la ruta del servidor. En MVC, esos casi nunca son iguales.

El archivo de vista de Layout.cshtml se carga como parte de cada solicitud, por lo que las rutas relativas ubicadas en el interior casi siempre se romperán.

Imagine que tiene dos páginas Orchard: site.com/mypage y site.com/something/mypage. Layout.cshtml se representa en ambos. Las URL relativas que funcionan para la primera seguramente se romperán cuando accedas a la segunda.

hojas de estilo CSS se cargan directamente mediante la especificación de ruta absoluta a los físicas archivos en la carpeta/Motivos/yourtheme/Estilos (por defecto), por lo que en este caso URL relativos funcionarán.

HTH

Answer 2

si examina la fuente, debería mostrar dónde está tratando de encontrar esa imagen y si falla. Probablemente sea la ruta relativa con la que está teniendo problemas, pruebe una ruta absoluta en el CSS para ver si ese es el problema. sin el sitio real, no puedo estar seguro.

Answer 3

que podría ser un poco tarde, pero esto puede ser de ayuda para otras personas.

Para obtener el tema actual y luego construir un camino dinámico (en contraposición a una ruta absoluta) utilizar este:

WorkContext.CurrentTheme: Obtiene el actual ExtensionDescriptor tema de trabajo.

Luego, dele la URL al constructor URL Html.ThemePath: Ej.

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

Have fun!

Recuerdos, Tiago.

Answer 4

Thx Tiago para su solución. Creo que esta es, de hecho, la solución correcta, en lugar de vincular la ruta completa que creo que requeriría que el sitio de Orchard esté en la raíz del dominio.

La referencia imagen completa de la pregunta original se vería así:

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

Answer 5

Me sorprende que nadie ha mencionado que se necesita lo siguiente web.config en la carpeta en la que sus imágenes/scripts/estilos residen (see the orchard docs)

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

Además, como otros han señalado, esta es la forma más fiable de la localización de una imagen:

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