I am using Flask framework. I have few tabs (Home, About, Services and Contact) in my bootstrap navbar.
Services tab is a dropdown Tab which has a dropdown item called profile and it is linked to Profile.html template
All the templates (html files) inherits from base.html.
except Services >> Profile page, all the other pages are rendering logo as per the base.html.
Logo is not getting rendered in Services >> Profile page as shown below:
Logo getting rendered in other pages
I would like logo to be rendered in Services >> Profile page as well like all other pages (home, about and contact. Please help me resolve the issue
project structure:
base.html
<!DOCTYPE html>
<html lang="english">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="static/images/logo1.png">
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"
>
<link rel="stylesheet" href={{url_for('static', filename='stylesheets/style.css')}}>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div class="container-fluid">
<nav class=" navbar navbar-expand-lg navbar-light fixed-top bg-light py-lg-0 " id="customNavbar">
<a class="navbar-brand" href="/">
<!-- Add logo -->
<img src="static/images/logo1.png" alt="logo">
</a>
<button class="navbar-toggle-collapsed d-block d-sm-block d-md-none" type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="true"
aria-label="Toggle navigation"
id="togglerButton">
<span class="line"></span>
<span class="line"></span>
<span class="line" style="margin-bottom: 0;"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="/"><strong>Home</strong></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/About"><strong>About</strong></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<strong>Services</strong>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="/Services/Profile">Create profile</a></li>
<li><a class="dropdown-item" href="#">Service 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="/Contact"><strong>Contact</strong></a>
</li>
</ul>
</div>
<form class="lg-flex">
<button type="button" href="/signin" class="btn btn-custom">Sign In</button>
<button type="button" class="btn btn-custom">Sign Up</button>
</form>
</nav>
</div>
<h1>Welcome</h1>
{% block content%}
{% endblock%}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
</body>
</html>
Profile.html
{% extends 'base.html'%}
{% block title %}Profile{% endblock %}
{% block content%}
<h1> Profile Page! </h1>
{% endblock%}
routes.py
from flask import render_template, Blueprint
routes = Blueprint('routes', __name__)
@routes.route('/')
def home():
return render_template('Home.html')
@routes.route('/About')
def about():
return render_template('About.html')
@routes.route('/Services/Profile')
def profile():
return render_template('Profile.html')
@routes.route('/Contact')
def contact():
return render_template('Contact.html')
init.py (double underscores before and after init not visible here)
from flask import Flask
from .routes import routes
def create_app():
app = Flask(__name__)
app.register_blueprint(routes, url_prefix='/')
return app
main.py
from Website import create_app
app = create_app()
if __name__ == '__main__':
app.run(debug=True)
You have a direct link to the image source, so the Profile page is trying to find logo1.png in
/Services/static/images/rather than juststatic/images/because of the routing as/Services/Profile.You can use
url_forto get the logo image, regardless of the page's location relative to the static folder, like you did with the stylesheet. It would look like this: