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
imagede HTML y una etiquetabuttonen una aplicación web Flask, puedes seguir estos pasos:image_filepathpara 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_filepathestá vacío. Si lo está, muestra una imagen predeterminada utilizando la funciónurl_forpara obtener la ruta al archivo de imagen estática. Siimage_filepathcontiene 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 etiquetaimagede HTML para mostrar la imagen seleccionada o la imagen predeterminada. Utiliza Jinja para actualizar el atributosrcde la etiquetaimagecon la ruta de la imagen seleccionada. Además, utiliza una etiquetaade HTML y una etiquetabuttonpara crear un botón que lance el cuadro de diálogo de archivo al hacer clic. Utiliza la funciónurl_forpara 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.