如何通过JavaScript/jQuery在XSLT中动态加载多张图片？

嗨，别担心！我帮你捋清楚怎么实现这个需求——把SharePoint 2010里的员工姓名传给JS生成图片URL，替换图片的src属性，看下面的步骤就行：

1. 先调整XSLT输出，带上员工姓名信息 #

在你的XSLT遍历员工记录的代码里，输出<img>标签时，把员工姓名存在自定义的data-staff-name属性里，同时给个默认的占位图（比如SharePoint自带的人员占位图），避免页面加载时出现空白：

<xsl:for-each select="你的员工记录节点路径">
  <img 
    class="staff-profile-pic" 
    src="/_layouts/images/person.png" 
    data-staff-name="{你的员工姓名节点}" 
    alt="{你的员工姓名节点} 的照片"
  />
</xsl:for-each>

这里用data-*属性存姓名是最佳实践，既符合HTML规范，又能让JS轻松获取到需要的信息。

2. 完善JavaScript函数，实现动态替换逻辑 #

接下来把你的loadStaffPic函数补全，再加上页面加载后的批量处理逻辑，这样就能自动给所有员工图片替换正确的URL了：

// 根据员工姓名生成图片URL的核心函数
function loadStaffPic(staffName) {
  // 这里写你实际的图片地址检索逻辑
  // 举个例子：假设员工图片存在SharePoint的SiteAssets库，命名格式是「姓名.png」
  const encodedName = encodeURIComponent(staffName); // 处理特殊字符，避免URL出错
  return `/SiteAssets/StaffPhotos/${encodedName}.png`;
}

// 页面加载完成后，批量处理所有员工图片
document.addEventListener('DOMContentLoaded', function() {
  // 选中所有带员工照片类的图片元素
  const staffPics = document.querySelectorAll('.staff-profile-pic');
  
  staffPics.forEach(pic => {
    const staffName = pic.getAttribute('data-staff-name');
    if (staffName) {
      const picUrl = loadStaffPic(staffName);
      // 给图片加错误处理：如果图片不存在，自动换回占位图
      pic.onerror = function() {
        this.src = '/_layouts/images/person.png';
      };
      // 替换图片地址
      pic.src = picUrl;
    }
  });
});

3. 几个关键注意点 #

• 字符编码：一定要用encodeURIComponent处理员工姓名，不然遇到空格、中文或者特殊字符时，URL会失效。
• 错误兜底：添加onerror事件很重要，万一某个员工的图片找不到，不会显示破碎的图标，用户体验更好。
• 权限检查：确保你的JS代码有访问图片存储位置（比如SharePoint图片库）的权限，不然图片会加载失败。

这样就能完美实现你要的功能啦！

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