本地图片无法显示求助：jQuery图片预览实现故障排查

1. 先修复最核心的路径拼接错误 #

你的代码里<img>的src只写了文件夹路径assets/，没有拼接具体的文件名fileName，导致浏览器请求的是文件夹而非具体图片文件，这是最直接的问题。修改这一行：

// 替换原来的src配置，拼接路径和文件名
src: `assets/${fileName}`

或者用字符串拼接写法：

src: 'assets/' + fileName

2. 验证路径是否匹配实际文件结构 #

• 确认assets文件夹的位置：如果你的HTML文件在项目根目录，assets/xxx.jpg是对的；如果HTML在子目录（比如html/文件夹），需要调整为../assets/${fileName}
• 打开浏览器F12开发者工具，切换到Network标签，刷新后看图片请求的状态：
  • 404错误：路径或文件名拼写错误（注意大小写，Linux环境下文件名区分大小写）
  • 403错误：文件权限不足，调整本地文件的读写权限

3. 解决本地文件访问限制 #

如果是直接双击打开本地HTML文件（路径以file:///开头），部分浏览器会限制本地资源加载，解决方法：

• 用本地服务器运行项目：比如安装Node.js后执行npx serve，或者用VS Code的Live Server插件，通过http://localhost:xxxx访问页面

4. 确认文件本身没问题 #

• 检查fileName是否包含完整扩展名（如.jpg、.png），如果数据里的文件名没有扩展名，需要手动补充
• 直接在浏览器地址栏输入图片的完整路径，确认图片本身没有损坏

修改后的完整代码片段 #

var policyFilesPreview = $('<div>');

$.each(data[0].policy_files, function(policyId, policyFile) {
  var policyRequirementDiv = $('<div>');
  policyRequirementDiv.append('<h3>Policy Requirement ID: ' + policyFile.policy_requirement_id + '</h3>');

  var filePreviewsContainer = $('<div>');

  policyFile.file_names.forEach(function(fileName) {
    var filePreview = $('<img>', {
      src: `assets/${fileName}`, // 已修复路径拼接
      alt: fileName
    }).css({
      width: '150px',
      height: 'auto'
    });

    filePreviewsContainer.append(filePreview);
  });

  policyRequirementDiv.append(filePreviewsContainer);
  policyFilesPreview.append(policyRequirementDiv);
});

$('#policyFilesPreviewContainer').empty().append(policyFilesPreview);

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