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:
The
<img>
tag is used to embed an image in the HTML document.The
src
attribute of the<img>
tag is set to{{ url_for('static', filename='images/example.jpg') }}
. This uses Flask'surl_for
function to generate a URL for the image. Thestatic
is the name of the folder where static files (including images) are typically stored in a Flask application, andimages/example.jpg
is the path to the image file within thestatic
folder.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.