Failed to shown background image properly in asp.net core
Estoy usando una plantilla en línea para usar mi proyecto. Cuando ejecuto mi aplicación, mi plantilla está funcionando perfectamente.
El problema es cuando doy una ruta para ir a otra página de mi aplicación (por ejemplo)area/controller/action) entonces no muestra ninguna imagen en mi página de vista que esperaba.
ere es mi _Layout page code:
html
@ViewData["Title"] - UBC
UBC
We Bring The Best For You
Testimonials header
The University Of British Columbia
Number One University Of The Whole World
Aenean convallis justo purus, id pulvinar enim finibus vitae.
Fusce et bibendum nisi, vitae mollis turpis. Aliquam tellus mi,
maximus vel orci imperdiet, convallis cursus tortor. Donec
sollicitudin metus sit amet nisl rhoncus, id ultrices risus
interdum. Proin mollis nulla nulla, ac cursus enim ornare a.
Cras quis porta lectus. Pellentesque eu ultrices arcu. Proin ac
tristique dui. Praesent mi odio, aliquam ac leo sit amet, dictum
sodales diam.
Quisque commodo, orci eget suscipit vestibulum, metus orci
fringilla urna, eget dignissim justo odio sit amet tellus. Morbi
dapibus molestie massa nec congue. Etiam lacinia pretium psuere.
Integer sodales porttitor lobortis. Nam vestibulum vestibulum
lectus non pulvinar. Vivamus eget sapien vitae magna lobortis
rhoncus molestie sit amet est. Fusce ultrices justo vitae
blandit consequat.
Praesent ornare
Vestibulum semper dolor sed elit mattis placerat cursus sed ac
urna. Mauris eget suscipit purus, id ullamcorper mi. Mauris eu
velit semper turpis semper.
Maecenas Pretium
Fusce pellenteqeue nunc sed orci mattis mattis. Etiam porttitor
bibendum ligula eu saggittis. Duis lacus mi, tincidunt ut massa
elementum, volutpat.
Nulla Quis Magna
Donec id ante nulla. Quisque vestibulum dapibus neque. Nam ex
massa, fringilla ac tortor a, porta quismod mi. Maecenas gravida
maximus ultrices.
Praesent ornare
Vestibulum semper dolor sed elit placerat cursus sed ac urna.
Mauris eget suscipit purus, id ullamcorper mi. Mauris eu velit
semper turpis semper.
Maecenas Pretium
Fusce pellenteqeue nunc sed orci mattis mattis. Etiam porttitor
bibendum ligula eu saggittis. Duis lacus mi, tincidunt ut massa
elementum, volutpat.
Nulla Quis Magna
Donec id ante nulla. Quisque vestibulum dapibus neque. Nam ex
massa, fringilla ac tortor a, porta quismod mi. Maecenas gravida
maximus ultrices.
Call to Action
Vivamus sollicitudin tellus
Maecenas maximus tellus in dolor auctor tristique. Nam hendrerit
posuere laoreet. Aliquam erat volutpat. Nulla eros est,
imperdiet vel feugiat non, ullamcorper mattis nulla.
Page footer
.container-fluid
@RenderSection("Scripts", required: false)
Cuando ejecuto mi aplicación, mi salida es:
cuando le di routing para mi aplicación, entonces encontré una salida inesperada.
mi imagen y sobre todo el fondo se había ido. ¿Cuál es la solución?
Pregunta hecha hace 3 años, 4 meses, 29 días - Por compilerhero1251
3 Respuestas:
-
Las imágenes están utilizando caminos relativos a la URL. Por ejemplo, cuando se utiliza
'theme1/img/1.jpg'y en la páginaAdmin/Subject; el navegador web buscará la imagen enAdmin/Subject/theme1/img/1.jpgBy appending
/al inicio de la imagen; el navegador web buscará la imagen en la raíz de la carpeta. Por ejemplo:'theme1/img/1.jpg'Respondida el Dec 18, 2020 a las 12:39 - por bytebison
Votos positivos: 0 | Votos negativos: 0 -
El problema que estás enfrentando se debe a la forma en que estás referenciando las imágenes en tu código. Cuando utilizas rutas relativas como
"theme1/img/1.jpg"para las imágenes, la aplicación intentará cargar esas imágenes relativas a la ruta actual en la que te encuentras.En el caso de que estés en una subcarpeta, como por ejemplo
area/controller/action, la ruta relativa de las imágenes cambia y la aplicación no puede encontrar las imágenes correctamente.Una solución para esto es utilizar rutas absolutas para las imágenes, de esta manera la aplicación siempre buscará las imágenes desde la raíz de tu proyecto.
Por ejemplo, puedes cambiar la referencia de las imágenes de esta manera:
html
a
htmlAl utilizar
@Url.Content("~/ruta_de_la_imagen"), te aseguras de que la ruta de la imagen sea resuelta correctamente, independientemente de la ubicación desde la que se acceda a la página.Realiza este cambio en todas las referencias de imágenes en tu código y deberías poder ver las imágenes correctamente en todas las páginas de tu aplicación sin importar la ruta.
Respondida el Dec 19, 2020 a las 12:41 - por Gpt
Votos positivos: 0 | Votos negativos: 0 -
El problema que estás experimentando se debe a que las rutas en ASP.NET Core son relativas a la ruta raíz de la aplicación. Cuando navegas a una ruta diferente, la ruta relativa a la imagen de fondo ya no es correcta.
Para resolver este problema, puedes utilizar rutas absolutas para los recursos estáticos, como imágenes y archivos CSS. Esto asegurará que las rutas sean correctas independientem ente de la ruta actual de la aplicación.
Para utilizar rutas absolutas, puedes utilizar el método
Url.Content()para generar una ruta absoluta a un recurso estático. Por ejemplo, para generar la ruta absoluta a la imagen de fondo, puedes utilizar el siguiente código:htmlAdemás, asegúrate de que los archivos de recursos estáticos se copian en el directorio
wwwrootde tu proyecto al publicar tu aplicación. El directoriowwwrootes el directorio raíz donde se alojan los recursos estáticos.Después de realizar estos cambios, las rutas absolutas a los recursos estáticos deberían funcionar correctamente y el fondo y las imágenes deberían mostrarse como se esperaba en todas las páginas de tu aplicación.
Respondida el Dec 19, 2020 a las 12:48 - por Gemini
Votos positivos: 0 | Votos negativos: 0