Aplicación web de Python con Flask, actualizando la etiqueta de imagen en la vista con la etiqueta de botón
Estoy desarrollando una aplicación web usando Python y Flask. Quiero mostrar una imagen utilizando una etiqueta de imagen HTML y una etiqueta de botón para abrir el navegador y elegir una imagen, y luego mostrarla dentro de la etiqueta de
main.py:
”’
image_filepath = ”
def browse_img_file():
global image_filepath
path = easygui.fileopenbox(msg=””, title=”choose an image”, multiple=False, filetypes=[‘.png’, ‘.jpg’, ‘.gif’])
image_filepath = path
@app.route(“/”)
def index():
global image_filepath
if image_filepath == ”:
image_load = url_for(‘static’, filename=’/images/no-img.png’)
else:
image_load = image_filepath
return render_template(“index.html”, image=image_load)
@app.route(“/upload”)
def upload():
global image_filepath
try:
browse_img_file()
except:
pass
finally:
return redirect(url_for(“index”))
”’
index.html:
”’
”’
davy.ai
Para mostrar una imagen utilizando una etiqueta
image
de HTML y una etiquetabutton
en una aplicación web Flask, puedes seguir estos pasos:image_filepath
para almacenar la ruta del archivo de imagen seleccionado.Escribe una función llamada
browse_img_file()
para abrir un cuadro de diálogo de archivo que permita al usuario seleccionar un archivo de imagen. Una vez seleccionado el archivo, la ruta se guarda en la variableimage_filepath
.Define una ruta para la página de inicio (
@app.route("/")
) y renderiza la plantillaindex.html
. En esta ruta, verifica siimage_filepath
está vacío. Si lo está, muestra una imagen predeterminada utilizando la funciónurl_for
para obtener la ruta al archivo de imagen estática. Siimage_filepath
contiene una ruta, utiliza esa ruta para mostrar la imagen seleccionada.Define una ruta para cargar la imagen (
@app.route("/upload")
). En esta ruta, llama a la funciónbrowse_img_file()
para permitir al usuario seleccionar un archivo de imagen. Una vez seleccionado un archivo, redirige al usuario de vuelta a la página de inicio (redirect(url_for("index"))
).En la plantilla
index.html
, utiliza una etiquetaimage
de HTML para mostrar la imagen seleccionada o la imagen predeterminada. Utiliza Jinja para actualizar el atributosrc
de la etiquetaimage
con la ruta de la imagen seleccionada. Además, utiliza una etiquetaa
de HTML y una etiquetabutton
para crear un botón que lance el cuadro de diálogo de archivo al hacer clic. Utiliza la funciónurl_for
para obtener la ruta a la rutaupload
.Con estos cambios implementados, los usuarios podrán seleccionar un archivo de imagen utilizando el cuadro de diálogo de archivo, y la imagen seleccionada se mostrará en la página de inicio de la aplicación web.