从 table 单元格值动态生成 img src

Question

如何根据 table 单元格值更改 img src 标签值？

我有以下代码：

<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>

这是一个烧瓶应用程序，我从数据库中提取数据并填写 table。我写了一个 javascript 函数，当鼠标放在名字上时会显示每个用户的照片，但现在它会为每个用户显示相同的照片。

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

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

所以现在我想从 img src 动态构建 urls 以便我可以看到每个用户的图片。图片文件夹中图片的名称格式为“user.fname.jpg”。那么如何在url中动态设置user.fname呢？ user.fname 将是 table 中的第一个 td。

Answer 1

我想你希望每个 img 标签都有一个唯一的 id 并用于显示和消失。像这样使用索引对等用户（未测试）：

{% 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 %}

从 table 单元格值动态生成 img src

Dynamically generate img src from table cell value

javascript

html

src