Display an External Image in the Browser Using Flask

Last Updated : 23 Jul, 2024

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:

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.

Display an External Image in the Browser Using Flask

tmishra2001

Improve

Article Tags :

Practice Tags :

python

Display an External Image in the Browser Using Flask

Fetch and Display an Image from a URL in Python Flask

Step 1: Setting Up Your Flask Application

Step 2: Creating the Flask Application

Step 3: Creating the HTML Template

Step 4: Running the Flask Application

Debugging Common Issues

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?