[FIXED] Images are not loading for the static images folder in flask app after __init__.py setup

Issue

I have a flask app that I have build. The users can upload images through a form. When the user uploads an image, it will add the images to a folder website/static/images/. The files are saving correctly in the folder, but I am not able to display the images because of its location or some issue with the strucutre of folders.

this is the init.py:

from flask import Flask, session, redirect, url_for
from pymongo import MongoClient
from os import path, mkdir

client = MongoClient()
db = client.Contractor 

app = Flask(__name__, static_url_path='/static')
app.config['SECRET_KEY'] = 'eigeinsonriuosvnirosjvsoe' 
upload_folder = 'website/static/images/'
if not path.exists(upload_folder):
  mkdir(upload_folder)
app.config['MAX_CONTENT_LENGTH'] = 25 * 1024 * 1024
app.config['UPLOAD_FOLDER'] = upload_folder

This is where I am trying to retrieve them and display them to the user:

{% for photo in all_photos %}
    <div>
      <a>
        <img style="height: 250px;" src={{ url_for('static', filename=photo.filename ) }}/>
      </a>
      <p>{{ photo.image_name }}</p>
      <p>{{ photo.caption }}</p>
      <p>{{ photo.location }}</p>
    </div>
  {% endfor %}

I have tried the following:

<img style="height: 250px;" src={{ url_for('static', filename=photo.filename ) }}/>

and this

<img style="height: 250px;" src={{ url_for('static/images', filename=photo.filename ) }}/>

and this

<img style="height: 250px;" src={{ url_for('static/images/', filename=photo.filename ) }}/>

This is the error I keep getting when I try any variation:

werkzeug.routing.BuildError: Could not build url for endpoint 'static/images' with values ['filename']. Did you mean 'static' instead?

Solution

Assuming that 'website' is the main dir in which your Flask application is set, and that you have a structure like this:

/website
  /static
     /images

then you should do this:

<img style="height: 250px;" src={{ url_for('static', filename='images/'+photo.filename ) }}/>

Answered By - Marco Evasi