Cómo servir imágenes en Flask

[JFalco]

Parecía que todo iba bien pero hemos topado con lo más tonto.

arbol de carpetas

app_prueba

      templates

          css

          imagenes
                portada_1.jpg
                portada.jpg
          index.html
               <img src="/imagenes/portada_1.jpg" alt="imagen de portada" width:"800">. Lo más tonto del mundo. HTML simple.

 index.py
 
           from flask import Flask, render_template, request, redirect
from datetime import datetime
from flask import send_from_directory
import os
app = Flask(__name__)
@app.route("/")
def inicio():
    return render_template("index.html")
if __name__ == "__main__":
    app.run(debug=True)

      He probado de todas las formas los directorios y no ha funcionado de ninguna de las maneras. El ejemplo que he dejado es aleatorio.

      La máquina ve va autocompletando en la dirección correcta. He probado incluso desde a raíz o metiendo "../". Vamos toda la combinatoria posible.

      Por lo tanto no es la ruta de carga. He puesto otra imagen y cambiado en nombre (por si acaso), y tampoco.
      Finalmente he probado desde Windows abriendo en fichero directamente pulsando el "index.html" y me ha cargado la imagen con las siguientes rutas:

              ../templates/imagenes/portada_1.jpg
y en
 
              imagenes/portada_1.jpg

Para volverse loco.

[Francisco]

Este tipo de web frameworks manejan los archivos estáticos (imágenes, CSS, JS, etc.) de una forma particular. Si no me equivoco, la ruta de tu imagen debería ser (nótese la carpeta static):

Código:

app_prueba/static/imagenes/portada_1.jpg

Luego en el HTML:

Código:

<img src="/static/imagenes/portada_1.jpg" alt="imagen de portada" width:"800">

Saludos

[Costero]

Luego en el HTML: Para file estaticos como imagenes, css, javascript se usa "url_for"

Código:

<img src="{{url_for('static', filename='imagenes//portada_1.jpg')}}"  alt="imagen de portada" width:"800">

https://plainenglish.io/blog/how-to-display-images-in-python-flask


Sal2

[JFalco]

Pues no funciona tampoco.

<table with="100%">
      <tr>
       
        <td>
          <div id="container">
            <div id="arriba">
              NOMBRE EMPRESA
            </div>
            <div id="centro" font-color="#c0c0c0" font-family="tahoma" font-size="12px">
              <form>
                <div>
                <label for="user"> Usuario: </label><br/>
                <input type="text" id="user" required/>
                </div>
               
                <div>
                <label for="password"> Contraseña: </label><br/>
                <input type="password" id="password" required/>
                </div>
                <br/><button type="submit"><center>Login</center>  </button>
              </form>
            </div>
          </div>
        </td>
        <td>
          <img src="/static/imagenes/portada_1.jpg" alt="imagen de portada" width:"800">
          <img src="{{url_for('static', filename='imagenes//portada_1.jpg')}}"  alt="imagen de portada" width:"800">  
        </td>
      </tr>
    </table>
    
   
    he probado, incluso, con las dos formas y he cambiado la carpeta. Ahora el árbol es:

app_web>
    >templates>
             >css
        >static>
            >imagenes
                *portada_1.jpg
        *index.html
      *index.py

[Costero]

No lo veo muy bien pero me parece que tienes mal organizado el projecto. Debe ser asi:



├── app.py
├── requirements.txt
├── static
│   ├── css
│   ├── images
│   │   └── portada_1.png
│   └── js
└── templates
    └── index.html


Nota: Mi directorio dice images, pero debe mantenerse imagenes.en el tuyo.
Si no usas requirements.txt entonces no tienes por que ponerlo. Yo si lo uso.

[JFalco]

Lo hemos conseguido. Muchísimas gracias.

Me faltan algunos detalles que me están fallando de conexión la DB y alguna otra cosa que ya iré preguntando si no solvento por mis medios... y a montar cosillas con estas nuevas herramientas.
Insisto, muchísimas gracias por tu ayuda,
Un saludo.