求助：在FormAssembly中用jQuery从URL渲染指定表单字段图片

问题背景 #

已通过Salesforce预填充FormAssembly的两个隐藏字段tfa_1和tfa_2（存储公开图片URL），需要将对应图片渲染到tfa_3和tfa_4字段内预置的空<img>标签中，但使用官方示例代码后，图片显示在表单顶部而非指定字段。

问题原因 #

原代码的选择器不够精准：

• $('.htmlContent > img')会选中所有.htmlContent容器下的img元素，可能包含表单顶部的其他无关图片
• $('input[id^=tfa_X]')的匹配规则不符合实际使用的tfa_1、tfa_2字段，导致URL获取错误

修正后的代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
window.onload = function() {
    // 精准定位到tfa_3和tfa_4字段内的img标签
    const targetImgs = $('#tfa_3 img, #tfa_4 img');
    // 获取对应隐藏字段的图片URL
    const imgUrls = [$('#tfa_1').val(), $('#tfa_2').val()];
    
    targetImgs.each(function(index) {
        if (imgUrls[index]) {
            $(this).attr('src', imgUrls[index]);
        }
    });
};
</script>

代码说明 #

• 用$('#tfa_3 img, #tfa_4 img')精准选中目标字段内的img标签，避免误选其他元素
• 直接指定tfa_1和tfa_2获取URL值，匹配实际字段ID
• 使用jQuery的each方法遍历目标img，逐个设置src属性，确保对应关系正确

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