Learn ICT Now

Displaying images in a Flask application follows the exact same logic as linking external CSS files. Because Flask manages paths dynamically, you cannot use standard relative file paths like src="../images/photo.jpg". Instead, you use the built-in URL_for Function to tell Flask to look inside your designated directory.

Here is a step-by-step Guide to organising, referencing, and rendering images in your Flask Project.

Part 1: Project Directory Structure

Flask expects all images to be stored within the Static folder. To keep your Project organised, it is best practice to create an images or img subfolder inside it.

Set up your directory structure like this:

Plaintext

my_flask_app/
│
├── app.py
├── Static/
│   ├── css/
│   │   └── style.css
│   └── images/
│       └── logo.png        <--- Place your image files here
└── templates/
    ├── base.html
    └── index.html

Part 2: Linking an Image in HTML

To display an image, use the standard HTML <img> tag, but replace the traditional src path with a Jinja placeholder using URL_for('Static', filename='...').

Example Syntax:

HTML

<img src="{{ URL_for('Static', filename='images/logo.png') }}" alt="Application Logo">

Implementing it into your template (templates/index.html)

Here is how you would use it within an inherited page layout:

HTML

{% extends 'base.html' %}

{% block title %}Home - Images Guide{% endblock %}

{% block content %}
    <h1>Adding Images to Flask</h1>
    <p>Below is an example of an image served directly from our Static files directory:</p>

    <div class="image-wrapper">
        <img src="{{ URL_for('Static', filename='images/logo.png') }}" alt="My Project Logo" width="300">
    </div>

    <p>Flask uses <code>URL_for('Static', filename='images/logo.png')</code> to build the absolute path dynamically.</p>
{% endblock %}

Part 3: Controlling Image Sizes with CSS

Images will render at their native resolution unless you tell them otherwise. It is a good practice to use your CSS file (Static/css/style.css) to make your images responsive so they don’t break your page layout.

Add this to your stylesheet:

CSS

/* Prevent images from breaking out of their containers */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Optional styling for a clean layout */
.image-wrapper {
    margin: 20px 0;
    padding: 10px;
    background: #eee;
    border-radius: 4px;
    display: inline-block;
}

Part 4: Common Troubleshooting Tips

If your image is appearing as a broken icon link, double-check these common mistakes:

• Typographical Case Sensitivity: Linux Servers (and Flask’s local server Environment) are Case-sensitive. If your file is named Logo.PNG but your code looks for logo.png, the image will fail to load.
• Incorrect Quote Nesting: Ensure you mix double and single quotes properly. If your src="" uses double quotes, the filename='' must use single quotes (or vice versa).
  • Wrong: src="{{ URL_for("Static", filename="images/logo.png") }}" (Causes a syntax error)
  • Right: src="{{ URL_for('Static', filename='images/logo.png') }}" (Correct)
• Misplaced Folders: Ensure your images folder lives inside the Static folder, not directly in the Project root or the templates directory. Flask’s URL_for('Static', ...) Function will purely search within the top-level folder named Static.