Jinja2 Using Images in HTML

Use external link in img src in flask jinja2

Why not simply:

<img src='https://unsplash.com/photos/uUVkzxDR1D0'
  alt="No image">

Of course this hotlinks that image from the remote server within your page, which some hosts may disable for their images.

how to display image onclick inside a jinja loop?

Okay so as @MatsLindh's comment said, it solved my case.
There's no need for javascript or Jquery here, as creating unique modals on a length of the array has solved this issue. Which make perfect sense.

So the code should be like this:

{% for attachment in attachments %}
    <div class="col-12 col-lg-6">                        
        <div class="d-flex justify-content-between attachment-item">
            <div class="start"><i class="fas fa-file-alt me-3"></i><a class="btn" role="button" data-bs-toggle="modal" data-bs-target="#view-attachment-{{attachment.id}}"><span>{{attachment.attachment}}</span></a></div>

        </div>
    </div>  
<!-- Modal -->
<div class="modal fade"
    id="view-attachment-{{attachment.id}}"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered" role="document" style="position: relative;display: table;overflow-y: auto;overflow-x: auto;width: auto;min-width: 300px;max-width: 80%;">
        <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{attachment}}</h5>
          </button>
        </div>
            <!-- Add image inside the body of modal -->
            
            <div class="modal-body">
                <img id="image" src="/assets/img/{{name}}_Attachments/{{attachment}}" alt="Click an attachment" style="max-width: 100%;"/>
            </div>

            <div class="modal-footer">
                <button type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal">
                    Close
            </button>
            </div>
        </div>
    </div>
</div> 
                                
{% endfor %}

How to add an image to a jinja html page

Just use html img tag for that. If you pass your image in context as variable;

{% extends "media/header.html" %}
{% block content %}
    <img src="{{ variable }}" alt="image alt text" />
{% endblock %}

If you just have static path;

{% extends "media/header.html" %}
{% block content %}
    <img src="{{ static('path/to/image.png') }}" alt="image alt text" />
{% endblock %}

Call loop html jinja does not work to call some images on table HTML

So this is because there's a function called table which return table.html like this, that's why the return function from img_dir didnt work

the system taking priority of return function

the solution is id merge them as one, so the return will do it together as one, no one taking the priority.

merge the code as one return

the result they called, but another issue has occured, might take the new ticket i guess

problem solved but its just beginning

How to set background image dynamically in Jinja2?

We can pass the image filename or filepath from Flask app to the template and render the image as background of any HTML element.

Here I am showing an example of passing the blog id and filename from Flask app to template. The images are stored in static folder.

Directory structure:

├── app.py
├── static
│   └── images
│       ├── 1.jpg
│       └── 2.jpg
└── templates
    └── blog.html

app.py:

from flask import Flask, render_template


app = Flask(__name__, static_folder='static')

@app.route('/blog/<int:blog_id>')
def show_post(blog_id):
    filename = "{}.jpg".format(blog_id)
    return render_template('blog.html', blog_id=blog_id, filename=filename)

blog.html:

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Flask Dynamic Background in Bootstrap Jumbotron</title>
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
  <main role="main">
    <section class="jumbotron text-center" style="background-image: url({{url_for('static', filename='images/'+filename)}})">
      <div class="container" style="color: white;">
        <h1 class="jumbotron-heading">Example Blog Post No: {{ blog_id }}</h1>
        <p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
        <p>
          <a href="#" class="btn btn-primary my-2">Main call to action</a>
          <a href="#" class="btn btn-secondary my-2">Secondary action</a>
        </p>
      </div>
    </section>
  </main>
</body>
</html>

Output:

Visiting the blog post with id 1:

blog post 1

Visiting the blog post with id 2:

blog post 2