how to add images in hml while using flask

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Image Example</title>
</head>
<body>

    <h1>Image Example</h1>

    <img src="{{ url_for('static', filename='images/example.jpg') }}" alt="Example Image">

</body>
</html>

Explanation:

  1. The <img> tag is used to embed an image in the HTML document.

  2. The src attribute of the <img> tag is set to {{ url_for('static', filename='images/example.jpg') }}. This uses Flask's url_for function to generate a URL for the image. The static is the name of the folder where static files (including images) are typically stored in a Flask application, and images/example.jpg is the path to the image file within the static folder.

  3. The alt attribute provides alternative text for the image, which is displayed if the image cannot be loaded. In this example, it is set to "Example Image."

Note: Make sure you have a folder named "static" in your Flask project, and within that folder, create a subfolder named "images" to store your image files. Adjust the filename and path accordingly based on your project structure.