Angular开发：*ngFor遍历image_url数组渲染图片时图片不显示排查

• 第一步：检查DOM渲染与基础样式
  打开浏览器开发者工具的「元素(Elements)」面板，确认：
  • img标签是否已经正常生成（说明*ngFor遍历已生效）
  • 如果img已生成，查看其src属性是否填充了预期的链接/占位图地址
    常见问题：
  • img标签被CSS隐藏：检查是否被添加了display:none、opacity:0类，或是宽高被设为0、父元素设置了overflow:hidden裁剪了内容
  • 占位图路径错误：直接访问src里的assets/profile.svg链接，若返回404，检查angular.json的assets配置项是否已将src/assets文件夹加入静态资源打包路径
• 第二步：验证遍历数据的结构与赋值
  若元素面板里img标签未生成，说明遍历的postImages变量为空或未正确赋值：
  • 在组件赋值后加console.log(this.postImages)，确认接口返回的res.data.postdata.image_url是否真的是字符串数组
  • 常见踩坑：接口返回的不是['url1', 'url2']的字符串数组，而是[{imgUrl: 'url1'}]的对象数组，若直接绑定单个遍历项，会将[object Object]作为src值，自然加载失败
  • 建议将遍历项命名为imgUrl这类单数形式，避免和复数的postImages数组混淆，减少绑定写错的概率，即改写为*ngFor="let imgUrl of postImages"
    同时确保组件变量声明时加初始值，避免遍历undefined报错：
    postImages: string[] = [];
• 第三步：检查模板绑定的语法
  若数据结构正确，检查img的动态绑定写法是否正确：
  错误写法（静态插值、异步更新时可能渲染异常）：
  <img src="{{ imgUrl ? imgUrl : 'assets/profile.svg' }}">
  正确的动态绑定写法：
  <img [src]="imgUrl ? imgUrl : 'assets/profile.svg'">
  • 注意：不要漏掉src前面的[]，否则Angular不会将其作为动态属性绑定，只会把它当成静态字符串解析
• 第四步：排查Angular安全策略拦截
  若控制台报unsafe value used in a resource URL context错误，说明第三方/HTTP协议的图片链接被Angular默认安全策略拦截，需要做安全豁免处理：
  1. 组件注入DomSanitizer服务，新增图片url处理方法：

  import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
  
  constructor(private sanitizer: DomSanitizer) {}
  
  getSafeImgUrl(rawUrl: string): SafeResourceUrl {
    const targetUrl = rawUrl ? rawUrl : 'assets/profile.svg';
    return this.sanitizer.bypassSecurityTrustResourceUrl(targetUrl);
  }
  

  2. 模板绑定src时调用该方法：
     <img [src]="getSafeImgUrl(images)">
• 第五步：排查防盗链与跨域问题
  若网络面板显示图片请求返回200，但控制台报跨域/防盗链错误，给img标签添加referrerpolicy属性绕过防盗链限制：
  <img [src]="getSafeImgUrl(images)" referrerpolicy="no-referrer">

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