¿Por qué CSS no funciona y la imagen no se muestra en mi aplicación django

Comencé con una aplicación django e intenté ejecutar index.html. Pero CSS no está funcionando y también la imagen no está mostrando. Sin embargo, Si corro índice.html además de esta app, está funcionando bien.

mi configuración. Py:

""" Django settings for mac project.

Generated by 'django-admin startproject' using Django 3.1.4.

For more information on this file, see https://docs.djangoproject.com/en/3.1/topics/settings/

For the full list of settings and their values, see https://docs.djangoproject.com/en/3.1/ref/settings/ """

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'. BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret! SECRET_KEY = 'zzam)ocs^4jpa618b+dp^da6!#r9!*ka6$=u+0@0wc=fxo9*_l'

# SECURITY WARNING: don't run with debug turned on in production! DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'blog',
    'shop', ]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware', ]

ROOT_URLCONF = 'mac.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    }, ]

WSGI_APPLICATION = 'mac.wsgi.application'


# Database
# https://docs.djangoproject.com/en/3.1/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    } }


# Password validation
# https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    }, ]


# Internationalization
# https://docs.djangoproject.com/en/3.1/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/

STATIC_URL = '/static/'

mi url.py:

"""mac URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('shop/', include('shop.urls')),
    path('blog/', include('blog.urls')),
]

Django es un marco web libre y de código abierto basado en Python que sigue el patrón arquitectónico modelo-template-views. Se mantiene por la Fundación Django Software, una organización independiente estadounidense establecida como una organización sin fines de lucro 501.

Cuando ejecuto servidor solo muestra texto. Css no está cargando.

Pregunta hecha hace 3 años, 4 meses, 13 días - Por scriptsculptor

2 Respuestas:

  • El problema que estás experimentando con la carga de CSS y la imagen puede estar relacionado con la configuración de archivos estáticos en tu aplicación Django.

    Asegúrate de seguir estos pasos para configurar correctamente los archivos estáticos:

    • Agrega la siguiente configuración a tu archivo `settings.py`:
    python
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    BASE_DIR / "static",
]
    • Crea una carpeta llamada `static` en el directorio raíz de tu proyecto Django.
    • Dentro de la carpeta `static`, organiza tus archivos estáticos de la siguiente manera:
    - `static/css/style.css` (ubicación de tus archivos CSS)
    • `static/images/image.jpg` (ubicación de tu imagen)
    • Asegúrate de que en tu archivo HTML (`index.html`, por ejemplo) estás referenciando tus archivos estáticos de la siguiente manera:
    html

Mi imagen
    • En tus vistas de Django, asegúrate de tener configurado el contexto para los archivos estáticos:
    python
from django.shortcuts import render

def index(request):
    return render(request, 'index.html', {})

    Con estos pasos, Django debería ser capaz de encontrar y cargar tus archivos estáticos correctamente. Recuerda también que en entorno de desarrollo, el servidor de Django no es adecuado para servir archivos estáticos en producción, por lo que tendrás que configurar un servidor web dedicado (como Nginx o Apache) para manejar correctamente los archivos estáticos en un entorno de producción.

    Respondida el Dec 18, 2020 a las 11:26 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Posibles problemas:

    1. Ruta estática incorrecta:

    Asegúrate de que la configuración de STATIC_URL en settings.py coincida con la ruta de URL utilizada en tus archivos HTML (/static/).

    2. Archivos estáticos no recopilados:

    Ejecuta python manage.py collectstatic para copiar los archivos estáticos a la carpeta de recolección especificada en STATIC_ROOT.

    3. Configuración de ruta incorrecta:

    Verifica que la aplicación django.contrib.staticfiles esté incluida en INSTALLED_APPS en settings.py. Asegúrate de que el middleware django.contrib.staticfiles.middleware.StaticFilesMiddleware esté habilitado en MIDDLEWARE.

    4. Problemas de permisos:

    Verifica que el servidor web y Django tengan los permisos correctos para acceder a los archivos estáticos.

    5. Conflicto de archivos:

    Busca archivos CSS con el mismo nombre en varias ubicaciones, lo que puede provocar conflictos.

    6. Caché del navegador:

    Intenta borrar la memoria caché del navegador y volver a cargar la página.

    Para la imagen que no se muestra:

    Verifica que la ruta de la imagen en el archivo HTML sea correcta. Asegúrate de que la imagen exista y esté ubicada en la ruta correcta. Comprueba si hay caracteres especiales o espacios en el nombre del archivo de imagen.

    Además, puedes intentar:

    Verifica los registros de Django y del servidor web para detectar errores. Habilita DEBUG = True en settings.py para obtener información de depuración adicional.

    • Crea una nueva aplicación Django y copia tus archivos para descartar problemas de configuración.

    Si ninguno de estos pasos resuelve el problema, proporciona más detalles sobre el código y los errores específicos que estás encontrando.

    Respondida el Dec 18, 2020 a las 11:27 - por Gemini

    Votos positivos: 0 | Votos negativos: 0