How To Link External Files in Flask Application

How To Link External Files in Flask Application

linked your .css, images, or .js files to your ongoing flask project, and the files aren't executing their function after the linking. you're probably like me at the moment of writing this.

Flask is a flexible python framework it obeys common conventional file structures shown below.

app/ root directory contains ll your Flask appliction contains all your python modules, template, static files, etc.

- app/static/ : directory contains static files such as CSS stylesheets, javaScript files, and images.

-app/templates/ : directory contains HTML templates for your application.

-app/__init__.py: your app initialization file for your Flask pp. sets up the Flask app and creates the 'app' objects used in your application.

-app/models.py: This python file contains classes for your application database table.

-app/forms.py: This python file handles user inputs, such as user login, authentications or signup form.

main.py: This is your flask entry point , it contians the code to start your server and runs the app.

app/
|--templates--|
|---------html files
|--static--|
|---------Css/js/images
|--__init__.py
|--models.py
|--forms.py
|--models.py
|--main.py

Example when linking to various file path :

#linking a CSS styleSheet with the flask jinja templates
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename)}}">

#linking a js stylesheet with the flask jinja template
<script src="{{url_for('static', filename='javascriptFile.js')}}"></script>

#linking images with thke flask jinja template
<img src="{{url_for('static', filename='img1.png')}}">

#or the normal html linkage if the file you're liking to are in xame directory
<img src="img1.png">

#If your're linking the file down it subdirectory folder
<img src="/static/images/img1.png">

#If the file you're linking is in the prent folder and then to another subfolder the two dots(..) means go up to the parent directory and then to the static subfolder
<img src=../static/imges/