同站点无URL仅用ID，如何实现图片与对应文本绑定展示？

你的问题根源在于非法HTML标签、图片URL未动态绑定、元素顺序/标签闭合错误，导致浏览器渲染结构混乱。

修正步骤： #

• 删掉无效的<div input type="image">标签，这是错误的HTML写法，会干扰正常渲染顺序。
• 将图片的src属性改为动态绑定ID的形式：/image/{{ id }}，确保每个条目加载对应ID的图片。
• 补全img标签的闭合符号>，同时调整元素顺序，让图片紧跟标题，再放置文本内容。
• 把max-width放到style属性中（直接写在img标签里无效，需用内联样式或CSS类）。

修正后的代码示例： #

<!-- 单个条目结构 -->
<div class="info-row">
    <div class="info-label">EVALUATE RESULTS, PROCESSES AND STANDARDIZATION:</div>
    <img src="/image/{{ id }}" style="max-width: 100px; height: auto;" alt="attachment">
    <div class="info-value">{{ id }}</div>
</div>

<!-- 多个条目循环渲染示例 -->
<div class="info-row">
    <div class="info-label">PROBLEM STATEMENT:</div>
    <img src="/image/{{ problem_id }}" style="max-width: 100px; height: auto;" alt="attachment">
    <div class="info-value">{{ problem_content }}</div>
</div>

关键说明： #

每个info-row独立包裹一组标题、图片、文本数据，循环渲染时每个条目会自动绑定对应的数据，不会出现所有图片集中在顶部的问题。

内容的提问来源于stack exchange，提问作者April