Una guía para cargar imágenes con una aplicación Django

Una de las características más atractivas de una aplicación moderna es su capacidad para acomodar imágenes. Las imágenes, como imágenes, ilustraciones y animaciones, aportan un atractivo visual a una aplicación.

Si bien las imágenes son importantes, pueden ralentizar la aplicación y aumentar las amenazas de seguridad a la base de datos.

Para las aplicaciones creadas en Django, cargar imágenes es fácil y seguro. Django tiene una función especializada que proporciona carga de imágenes.

Aprendamos cómo cargar imágenes en una aplicación Django sin comprometer la seguridad.

Que necesitas

Antes de comenzar a cargar imágenes, asegúrese de tener los siguientes requisitos:

• Instalar Python
• Instalar Pip
• Instalar Pipenv (también puedes usar venv si lo deseas)
• Instalar Django
• Tiene una aplicación Django existente que necesita imágenes

Ahora que tiene las dependencias necesarias, comencemos.

1. Instalar almohada

Django tiene un

campo de imagen en sus modelos. El campo almacena las cargas de imágenes en una ubicación específica en el sistema de archivos, no en la base de datos. Almohada es una biblioteca de Python que busca imágenes en ImageField.

Instalar almohada use el siguiente comando:

pipenv install pillow

Si está usando venv, use este comando en su lugar

pip install pillow

2. Crear modelo

Crear un campo de imagen referencia en la base de datos. Luego, agregue el subir a argumento en el modelo. El argumento define una ubicación de almacenamiento en el sistema de archivos.

classProfile(models.Model):
 name = models.CharField(max_length=80, blank=True)
 bio = models.TextField(max_length=254, blank=True)
 profile_picture = models.ImageField(upload_to='photos/')

def__str__(self):
returnf'{self.user.username} profile'

El método al final ayuda a convertir los datos en cadenas.

A continuación, migre y confirme los nuevos cambios en la base de datos. Luego, debe editar la configuración del proyecto.

Navegue a la configuración del proyecto. Bajo el encabezado # Archivos estáticos (CSS, JavaScript, Imágenes), agregue la URL de medios.

# https://docs.djangoproject.com/en/4.0/howto/static-files/
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
 
# Extra places for collectstatic to find static files.
STATICFILES_DIRS = (
 os.path.join(BASE_DIR, 'static'),
)
 
# STATICFILES_STORAGE = 
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

Agregar URL de medios a la configuración define una ruta específica para mostrar las imágenes cargadas. El archivo multimedia almacena las imágenes de la aplicación. El camino se verá así: 127.0.0.1:8000/medios/perfil/imagen.jpg

Actualizar el PLANTILLAS matriz en la configuración del proyecto. Agregar django.template.context_processors.media a la matriz de plantillas.

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',
'django.template.context_processors.media'
 ],
 },
 },
]

La configuración de medios de los procesadores ayuda a cargar las imágenes cargadas en las plantillas de la aplicación.

A continuación, debe agregar el MEDIA_ROOT ruta a las URL de la aplicación. Esto ayudará a cargar las imágenes cargadas en el servidor de desarrollo.

Primero, importe la configuración del proyecto desde el django.conf módulo y un función estática. Luego, agregue a la patrones de URL una ruta estática que muestra la ubicación de los archivos subidos.

from django.urls import path
from. import views
from django.conf import settings
from django.conf.urls.static import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
 
urlpatterns = [
 path('', views.index, name = 'index'),
 path('profile', views.profile, name='profile'),
]
 
if settings.DEBUG:
 urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
 urlpatterns += staticfiles_urlpatterns()

5. Cargas de imágenes de prueba

A continuación, ejecute el servidor:

python manage.py runserver

Si no hay errores, navegue hasta el panel de administración de Django agregando una ruta de administración a la URL base, http://127.0.0.1:8000/admin.

Dentro del panel de administración, cuando haga clic en el modelo de perfil, verá un campo de imagen agregado en la parte inferior.

Cuando cargue una imagen, verá una nueva carpeta creada en la carpeta de la aplicación llamada medios de comunicación. Cuando abra la carpeta, verá la imagen que cargó a través del panel de administración.

6. Mostrar la imagen cargada

Debe actualizar la plantilla de perfil para mostrar la imagen de perfil.

Agregarás un imagen etiquete y rellénelo con el foto de perfil atributo. El campo de imagen tiene un atributo de URL que proporciona la URL absoluta del archivo. Puede especificar la forma y apariencia de la imagen usando clases CSS.

{% extends "base.html" %}
{% load static %}

{% block content %}
<divclass="card mb-3 bg-whitesmoke"style="max-width: fit content;">
<divclass="row g-0">
<divclass="col-md-4">
<imgsrc="{{user.profile.profile_picture.url}}"width="100px"alt="profile pic"class="mx-auto d-block rounded-circle" />
div>
div>
div>
{% endblock %}

Puede ejecutar el servidor para cargar la imagen. Luego verifique la plantilla en el navegador para ver la imagen que se muestra.

Cómo cargar imágenes en una aplicación Django

Django facilita la carga de imágenes en sus aplicaciones. Django tiene un campo especializado en sus modelos que agrega y verifica el tipo de archivo antes de cargarlo.

ImageField proporciona una ruta absoluta a un sistema de archivos para almacenar las imágenes. Almacenar las imágenes en un sistema de archivos aumenta la velocidad de la aplicación y garantiza que la base de datos no se infiltre con archivos dañinos.