Dynamically generate img src from table cell value

Question

How can I change an img src tag value based on table cell value?

I have the following code:

<table class="table table-bordered table-hover table-striped">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">Firstname</th>
                        <th scope="col">Lastname</th>
                        <th scope="col">Email</th>
                    </tr>
                </thead>
                <tbody id="myTable">
                {% for user in users %}
                    <tr>
                        <td onmouseover="imageAppear('place-holder-1')" onmouseout="imageDisappear('place-holder-1')">{{ user.fname }}<img src="{{ url_for('static', filename='images/name_of_pic.jpg') }}" id="place-holder-1" style="zindex: 100; height: 400px; position: absolute; visibility: hidden;"/></td>
                        <td>{{ user.lname }}</td>
                        <td>{{ user.email }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

This is a flask app and I pull data from a database and fill in the table. I have written a javascript function that will show a photo of every user when the mouse is on the name, but right now it shows the same picture for every user.

<script>
      function imageAppear(id) {
      document.getElementById(id).style.visibility = "visible";}

      function imageDisappear(id) {
      document.getElementById(id).style.visibility = "hidden";}
</script>

So now I would like to dynamically build the urls from img src so that I can see the picture of every user. The names of the pictures in images folder have the form "user.fname.jpg". So how can I dynamically set the user.fname in the url? The user.fname would be the first td in the table.

Answer 1

I think you want that every img tag has an unique id and used for display und disappear. use the index peer user like this (not tested):

{% for user in users %}
                    <tr>
                        <td onmouseover="imageAppear('place-holder-1')" onmouseout="imageDisappear('place-holder-{{ loop.index }}')">{{ user.fname }}<img src="{{ url_for('static', filename='images/user' + user.fname + '.jpg') }}" id="place-holder-{{ loop.index }}" style="zindex: 100; height: 400px; position: absolute; visibility: hidden;"/></td>
                        <td>{{ user.lname }}</td>
                        <td>{{ user.email }}</td>
                    </tr>
{% endfor %}