es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Archivo estático en Django 3.2 no se carga

13 Jul, 2023 Programación

Mi problema es bastante simple y sin embargo me resulta tan difícil de resolver. El problema es que no puedo cargar el archivo CSS y la imagen que están en la carpeta estática ubicada en la carpeta raíz del proyecto. La carpeta estática no está bajo el nombre de la aplicación.

El nombre de mi proyecto es “ecommerce” y el nombre de mi aplicación es “store”.

Esta es la jerarquía de archivos de mi proyecto.

enter image description here

Este es mi archivo settings.py

enter image description here

También he agregado mi aplicación.

enter image description here

Sí, también he agregado el STATICFILES_DIRS.

enter image description here

También he intentado lo otro.

STATICFILES_DIRS = [
BASE_DIR / "static",
]

Utilicé temp.html para mostrar la demostración y aquí está mi código.

enter image description here

Y el archivo CSS que se llama main.css

enter image description here

Después de hacer todas las cosas correctamente, el archivo CSS y la imagen no se cargan.

enter image description here

Errores que obtuve en mi terminal

enter image description here

Y en el modo desarrollador de Chrome

enter image description here

Como sé que esto es un error bastante básico y soy principiante, no puedo seguir adelante hasta que se resuelva este problema. Agradecería si alguien pudiera venir y ayudarme a resolver el problema.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para resolver este problema, debes hacer algunos cambios en tu archivo settings.py y en el archivo HTML.

    En primer lugar, en tu archivo settings.py, asegúrate de tener las siguientes líneas de código:

    BASE_DIR = Path(__file__).resolve().parent.parent

STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

    Asegúrate de que STATICFILES_DIRS apunte al directorio correcto donde se encuentran tus archivos estáticos.

    A continuación, debes hacer algunos cambios en tu archivo HTML. En lugar de usar lo siguiente:

    <link rel="stylesheet" type="text/css" href="{% static 'main.css' %}">

    Utiliza lo siguiente:

    <link rel="stylesheet" type="text/css" href="{% static 'store/main.css' %}">

    Este cambio asegurará que el archivo CSS se cargue desde el directorio correcto.

    Finalmente, asegúrate de haber ejecutado el comando collectstatic para recopilar todos los archivos estáticos en el directorio STATIC_ROOT. Puedes hacerlo ejecutando el siguiente comando:

    python manage.py collectstatic

    Esto debería solucionar tu problema y asegurarse de que tu archivo CSS e imagen se carguen correctamente.

Comments are closed.