Si estás trabajando con Flask ya sabes que lo primero que hay que hacer para usar estáticos en aplicación Flask es guardarlos en la carpeta /static.
De esta manera cuando estemos creando plantillas sabremos dónde se encuentran estos ficheros: imágenes, librerías javascript, hojas de estilo,…
De primeras podríamos referenciar a un estático desde un template de la siguiente forma:
<img src="/static/images/logo.png"/>
Y este código no tiene porque fallar cuando ejecutemos nuestra aplicación Flask. Si bien, es verdad, que la forma en la que configuren y desplieguen la aplicación puede no estar bajo nuestro control. Así que puede variar la URL en la que se ejecute la aplicación o renombren el directorio de los estáticos.
Así que deberemos de utilizar el método url_for
para obtener la URL de la forma más correcta.
{{ url_for('static', filename='nombre_recurso') }}"/>
De esta forma si tenemos el siguiente recurso:
/static/images/logo.png
Podemos referenciarlo de la siguiente manera:
{{ url_for('static', filename='images/logo.png') }}
Y usarlo dentro de nuestro template de una forma sencilla:
<img src="{{ url_for('static', filename='images/logo.png') }}" /><¡
Con esto ya hemos visto lo sencillo que es usar estáticos en aplicación Flask.