WhatsApp

  
Cómo Almacenar y Presentar Imágenes en el desarrollo de tu Aplicación

Introducción

En la era de las aplicaciones móviles y web, la gestión de imágenes es esencial. A menudo, necesitamos mostrar imágenes almacenadas localmente en nuestras aplicaciones, ya sea para perfiles de usuario, productos, o cualquier otro propósito.


Cómo Almacenar Imágenes Localmente

Configuración del Servidor

Para comenzar, necesitas un servidor web que actúe como repositorio de imágenes.

Configura una ruta en tu servidor para manejar las solicitudes de carga de imágenes. Esta ruta será utilizada para recibir las imágenes desde la aplicación.


Integración de la Subida de Imágenes en la Aplicación

En tu aplicación, crea una interfaz de usuario que permita a los usuarios seleccionar y cargar imágenes. Puedes usar un elemento <input type="file"> en HTML


<input type="file" class="form-control" id="image" accept="image/*">


Cuando un usuario selecciona una imagen, la aplicación debe enviarla al servidor a través de una solicitud HTTP POST. 

Puedes solicitar al  usuario demás información para completar tu base de datos, una vez confirmado el formulario se envía la información.


<script>
$(document).ready(function() {
$('form').submit(function(e) {
e.preventDefault();
var formData = new FormData($('form')[0]);
$.ajax({
url: '/upload_form/',
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
// Maneja la respuesta del servidor si es necesario
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
});
});
</script>


Recuerda incluir enctype="multipart/form-data".


<form method="POST" enctype="multipart/form-data">


Procesamiento y Almacenamiento en el Servidor

En el servidor, asegúrate de que la solicitud de carga sea manejada correctamente. Valida la imagen para asegurarte de que sea segura y cumple con tus requisitos (tipo de archivo, tamaño, etc.).

Asigna un nombre de archivo único a la imagen para evitar colisiones de nombres.

Almacena la imagen en una ubicación local en el servidor, como una carpeta designada para imágenes. Por ejemplo, esta puede ser la ruta de almacenamiento:


app.config['UPLOAD_FOLDER'] = 'static/images'


Aquí tienes un ejemplo de como se puede realizar el almacenamiento tanto de la imagen como de la ruta:


@app.route('/upload_form/', methods=['POST'])
def upload_form():
if request.method == 'POST':
if 'image' in request.files:
image_file = request.files['image']
filename = secure_filename(image_file.filename)
image_file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
try:
image_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
new_image = Images(url=image_path)
db.session.add(new_image)
db.session.commit()
except Exception as e:
db.session.rollback()
flash('Error al agregar la imagen', 'danger')
return redirect(url_for('upload'))
else:
flash('Por favor, seleccione una imagen.', 'danger')
return redirect(url_for('upload'))

Recuperación de Imágenes en la Aplicación

Obtención de la Ruta de la Imagen desde la Base de Datos

En tu base de datos, asegúrate de tener una tabla que contenga información sobre las imágenes, incluyendo la ruta en la que están almacenadas en el servidor.

Cuando necesites mostrar una imagen específica en la aplicación, consulta la base de datos para obtener la ruta de la imagen correspondiente.

En este caso se está solicitando el url de un elemento con un id específico.


@app.route('/get_image_url/<int:imageId>', methods=['GET'])
def get_company_details(imageId):
image = Images.query.get(imageId)
if image:
imageData = {
'url': image.url
}
return jsonify(imageData=imageData)
else:
return jsonify(error='Image not found'), 404


Descarga y Almacenamiento en la Aplicación

Utiliza la ruta de la imagen obtenida de la base de datos para hacer una solicitud HTTP GET al servidor. Esto descargará la imagen.


<script>
$(document).ready(function() {
var imageId = $('#load-image').data('image-id');
url: '/get_image_url/' + imageId,
success: function(response) {
var image_data = response.imageData;
$('#load-image').attr('src', '/' + image_data.url);
},
error: function(jqXHR, textStatus, errorThrown) {
if (jqXHR.status === 404) {
alert('Imagen no encontrada');
} else {
alert('Error en la solicitud');
}
}
});
});
</script>

Mostrar Imágenes en la Aplicación

Visualización de Imágenes en la Interfaz de Usuario

Una vez obtenida la ruta la imagen se mostrará en tu interfaz.

<img id="load-image" src="">

Esta es una práctica sencilla para almacenar imágenes en una aplicación web, esta suele usarse cuando son pocas imágenes a almacenar, pero si vas a ocupar una gran cantidad de archivos lo recomendable sería almacenarlos en la nube.

Recuerda que la elección de la solución dependerá de tus preferencias y de la tecnología que estés utilizando para desarrollar tu aplicación. Siempre es importante asegurarte de que las imágenes sean accesibles y se carguen de manera eficiente para los usuarios de tu aplicación.

Alexandra Maya 30 septiembre, 2023
Compartir


Iniciar sesión dejar un comentario

  
Implementación de Identity Server con .Net Core 6
Primera Parte: Introducción y Configuración del Entorno