Open In App

Display an External Image in the Browser Using Flask

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Flask provides a simple and flexible way to develop web applications in Python. When it comes to displaying images from external sources, you can use Flask to create a route that renders an HTML template with the image embedded. This is particularly useful when you want to dynamically display images based on user input or external data.

Fetch and Display an Image from a URL in Python Flask

Step 1: Setting Up Your Flask Application

First, create a new directory for your project. Inside this directory, create a file called app.py. This file will contain the code for your Flask application. The project folder will look like this:

Screenshot-2024-07-13-185619
Project Directory

Step 2: Creating the Flask Application

  • Import the necessary modules.
  • Create a Flask app instance.
  • Define a route for the home page that sends an image URL to a template.
  • Run the Flask app in debug mode.
Python 
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    image_url = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQR7Ux_0KCqM6yV5BFsbm2exNQziSmVE-KJeA&s'
    return render_template('index.html', image_url=image_url)

if __name__ == '__main__':
    app.run(debug=True)

Step 3: Creating the HTML Template

  • Next, create a directory called templates inside your project directory. Inside the templates directory, create a file called index.html. This file will be our HTML template.
  • Set up a basic HTML document.
  • We use Flask’s template syntax ({{ image_url }}) to insert the image URL passed from our Flask route.
  • Display the image using the <img> tag.
HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Image</title>
</head>
<body>
    <h1>Here is your image:</h1>
    <img src="{{ image_url }}" alt="Image from external source">
</body>
</html>

Step 4: Running the Flask Application

Python 
python app.py

Output:

Screenshot-2024-07-13-190143
Output

Debugging Common Issues

  • Verify the URL is correct and accessible.
  • Check the Flask console for error messages and ensure Flask is installed correctly.
  • Ensure the URL is valid to avoid security risks.
  • Use HTTPS URLs to prevent mixed content warnings.

Conclusion

Displaying external images in Flask is straightforward with proper setup and rendering. This guide provides a foundational approach to expand upon.


T

tmishra2001
Improve
Article Tags :

Explore

Lightbox