如何通过EncodedAbsUrl从列表在DOM中追加图片？SharePoint列表问题

看起来你踩了SharePoint查找字段关联图片的常见坑——现在拿到的是图片列表项的详情页URL，而非图片文件本身的地址。别着急，咱们一步步修复：

1. 修正REST API请求URL #

你的原API请求有两个关键问题：

• items后缺少问号?，导致$select参数未被正确解析
• 没有展开图片列表项的File实体，无法获取图片文件的真实地址

替换成下面的API URL：

apiUrl = "/Legal/Attorneys/_api/web/lists/GetByTitle('attorneysBio')/items?$select=*,attorneysPic/Title,attorneysPic/File/EncodedAbsUrl&$expand=attorneysPic/File";

关键说明： #

• $expand=attorneysPic/File：强制展开关联图片列表项的File属性，这个属性里才存着图片文件的实际地址
• $select新增attorneysPic/File/EncodedAbsUrl：明确指定要获取图片文件的绝对URL

2. 调整JavaScript中的图片URL获取逻辑 #

原来的代码取的是列表项的URL，现在要改成从File实体里拿图片地址，还可以加个空值判断避免报错：

// 替换原来的attorneyPics赋值行
var attorneyPics = faqItems.attorneysPic?.File?.EncodedAbsUrl || '';

这里的?.是可选链操作符，能防止当attorneysPic为空时出现控制台报错，没有图片的话会赋值为空字符串。

3. （可选）优化无图片场景的渲染 #

如果有些条目没有关联图片，可以给个占位内容，避免页面出现破碎的图片框：

// 先生成图片或占位符HTML
var imgHtml = attorneyPics ? 
  '<img src="'+attorneyPics+'" class="img-responsive">' : 
  '<div class="text-center py-3">No attorney image available</div>';

// 然后在cardBuild里替换原来的图片代码
var cardBuild = '<div class="card">' + 
  '<div class="card-header pb-1 pl-0" role="tab" id="' + headerID + '">' + 
  '<a class="collapsed" data-toggle="collapse" data-parent="#' + accID2 + '" href="#' + cardBodyID + '" aria-expanded="false" aria-controls="' + cardBodyID + '">' + 
  '<h5 class="mb-0 font-thin">' + cardTitle + '<span class="rotate"></span></h5>' + 
  '</a>' + 
  '</div>' + 
  '<div id="' + cardBodyID + '" class="collapse" role="tabpanel" aria-labelledby="' + headerID + '" data-parent="#' + accID + '">' + 
  '<div class="row"><div class="col-md-3">' + imgHtml + '</div>' + 
  '<div class="col-md-9"><div class="card-body py-1 pl-0"><p>' + cardBody + '</p></div></div></div>' + 
  '</div>' + 
  '</div>';

这样修改后，就能正确渲染出关联的图片文件了。

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