Mostrar una imagen en la aplicación Flask
Aprenderemos, con esta explicación, cómo podemos agregar una imagen a una página web y cómo podemos cargar o mostrar varias imágenes en la aplicación Flask.
Mostrar una imagen en la aplicación Flask
En esta sección, estaremos cargando una imagen en nuestra página web, y el primer paso es crear dos directorios iniciales, static y templates. Crearemos un nuevo directorio que contendrá nuestras imágenes dentro de la carpeta static.
El siguiente paso es obtener la dirección de esta carpeta IMG que creamos dentro de la carpeta static. Así que tenemos que importar la biblioteca os y usarla para guardar la ruta de la carpeta IMG en una nueva variable llamada IMG_FOLDER.
IMG_FOLDER = os.path.join("static", "IMG")
Tendremos que pasar esta dirección a la carpeta de carga de configuración de la aplicación. Así que tenemos que ir dentro de UPLOAD_FOLDER y asignar la dirección donde queremos ver las imágenes.
app.config["UPLOAD_FOLDER"] = IMG_FOLDER
En el siguiente paso, uniremos la ruta usando UPLOAD_FOLDER con un nombre de imagen que queremos mostrar en la página web. Guardaremos esta dirección en la variable Flask_Logo dentro de la función Display_IMG().
Flask_Logo = os.path.join(app.config["UPLOAD_FOLDER"], "flask-logo.png")
A continuación, necesitaremos definir un argumento dentro de render_template() y pasarle la variable Flask_Logo como valor.
from flask import Flask, render_template
import os
app = Flask(__name__)
IMG_FOLDER = os.path.join("static", "IMG")
app.config["UPLOAD_FOLDER"] = IMG_FOLDER
@app.route("/")
def Display_IMG():
Flask_Logo = os.path.join(app.config["UPLOAD_FOLDER"], "flask-logo.png")
return render_template("index.html", user_image=Flask_Logo)
if __name__ == "__main__":
app.run(debug=True)
Ahora necesitaremos ir a la carpeta templates y crear un archivo index.html, y dentro de este archivo, escribiremos el código HTML básico. Solo pasaremos la variable user_image en la etiqueta img que definimos en render_template().
Este es el código fuente utilizado en el archivo HTML para este ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Worl!</title>
</head>
<body>
<h1>Hello World!</h1>
<center><h3>Flask Logo</h3><img src="{{ user_image }}" alt="Mike" height="240px" width="300px"></center>
</body>
</html>
Cuando ejecutemos esta aplicación, veremos que la imagen se muestra correctamente.
Mostrar varias imágenes en la aplicación Flask
Ahora agregaremos varias imágenes de la carpeta IMG y le mostraremos cómo puede mostrarlas todas, así que comencemos haciendo una lista de las imágenes. Crearemos esta lista dentro de la función que contendrá todos los activos de un directorio usando la función listdir(), y el nombre de la lista será IMG_LIST.
IMG_LIST = os.listdir("static/IMG")
Ahora crearemos un bucle para todas las imágenes, usaremos la comprensión de listas y lo almacenaremos en la misma variable llamada IMG_LIST.
from flask import Flask, render_template
import os
app = Flask(__name__)
IMG_FOLDER = os.path.join("static", "IMG")
app.config["UPLOAD_FOLDER"] = IMG_FOLDER
@app.route("/")
def Display_IMG():
IMG_LIST = os.listdir("static/IMG")
IMG_LIST = ["IMG/" + i for i in IMG_LIST]
return render_template("index.html", imagelist=IMG_LIST)
if __name__ == "__main__":
app.run(debug=True)
El siguiente paso es realizar algunos cambios en el archivo HTML. En lugar de pasarlos uno por uno, los mostraremos a través del bucle usando una variable imagelist que es una lista de múltiples imágenes.
Ahora pondremos una etiqueta img, y dentro de esta etiqueta, usaremos la etiqueta url_for para obtener archivos estáticos. url_for() tomará dos atributos: uno será static, y el segundo será el filename, y le pasaremos un elemento i que estamos iterando a través del ciclo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Worl!</title>
</head>
<body>
<h1>The Multiple Images</h1>
{% for i in imagelist %}
<img src = "{{ url_for('static', filename=i)}}">
{% endfor %}
</body>
</html>
Cuando ejecutamos el servidor y vamos al navegador, podemos ver las múltiples imágenes que se muestran aquí.
Hello! I am Salman Bin Mehmood(Baum), a software developer and I help organizations, address complex problems. My expertise lies within back-end, data science and machine learning. I am a lifelong learner, currently working on metaverse, and enrolled in a course building an AI application with python. I love solving problems and developing bug-free software for people. I write content related to python and hot Technologies.
LinkedIn