Unable to load images on web pages in flask web application

Question

I am trying to develop an flask web application in which banners should be displayed on web pages,but when I run the app initially banners are displayed on title page,when I click on any hyperlink it should redirect to next page,but on that page banners are not displaying why?

my html codes are in templates folder and images are in static folder

i had used this in title.html

<img src="../static/inner_banner5.jpg" width="1400" height="222">

and i had also used the same in admin_login.html

my app.py code is

__author__ = 'mullapudi'
from flask import Flask,request,redirect,Blueprint,render_template,flash

blueprint = Blueprint('app', __name__, url_prefix='/title')

@blueprint.route('/', methods=['GET', 'POST'])
def title():
    # Located at https://yourdomain.com/login
    return render_template('title.html')

@blueprint.route('/home/', methods=['GET', 'POST'])
def home():
    return redirect('/title/')

@blueprint.route('/admin/', methods=['GET', 'POST'])
def admin():
    return render_template('admin_login.html')

the problem here is the banner is displaying in title page where it has a hyper link to redirect to the admin_login page but in admin_login page it was not displaying the banner why

Answer 1

Don't use relative URLs, use url_for:

<img src="{{ url_for('static', filename='inner_banner5.jpg') }}" width="1400" height="222">

Your directory structure would then be

.
├── app.py
├── env
├── static
│   └── inner_banner5.jpg
└── templates