将表格中的图像动态渲染到 html 页面上的不同位置

Question

在下表中，我想提取所选行的“照片”列的内容，并将图像呈现在 html 页面上的某个位置。 'image' 列是 jpg 图像的路径。

在下面的示例中，第 3 行被选中，因此 peter.jpg 应显示在框中

• 对于列：照片，图像文件夹和文件的路径是从第 1 列中的名称 + '/assets/images/' 的串联动态生成的。例如：

  '/assets/images/' + col_1_value + '.jpg'

• 当您在表格中滚动时，框中的图像会发生变化

发布此问题后，我在 Stackoverflow 上找到了以下脚本，该脚本从表中获取 url 的值。我希望将包裹在 an 中的 url 分配给文本区域（或任何其他 html 感知容器）。我试图在代码的粗体部分执行此操作，但没有成功。

<script>
    (function () {
        if (window.addEventListener) {
            window.addEventListener('load', run, false);
        } else if (window.attachEvent) {
            window.attachEvent('onload', run);
        }
        function run() {
            var t = document.getElementById('table_main');
            t.onclick = function (event) {
                event = event || window.event; //IE8
                var target = event.target || event.srcElement;
                while (target && target.nodeName != 'TR') { // find TR
                    target = target.parentElement;
                }
                var cells = target.cells; //cell collection - https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement
                if (!cells.length || target.parentNode.nodeName == 'THEAD') {
                    return;
                }
   
                var f2 = document.getElementById('image_url');
                **f2.value = <img src="{{ url_for('static', filename = '/assets/images/name.jpg') }}" width="16" height="16" alt="name" border="0">;**
            };
        }
    })();
</script>

我该怎么做？ 这是一个 Python Flask 引导项目。 感谢您的帮助。

Answer 1

您应该使用img 标签在您的页面中显示图像 (https://www.w3schools.com/tags/tag_img.asp)

<table id="table">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>photo</th>
        </tr>
   <tbody>
        <tr>
            <td>John</td>
            <td>42</td>
            <td><img src="/assets/images/john.jpg" /></td>
        </tr>
        <tr>
            <td>Peter</td>
            <td>35</td>
            <td><img src="/assets/images/peter.jpg" /></td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>54</td>
            <td><img src="/assets/images/mary.jpg" /></td>
        </tr>
   </tbody>
</table>