Angular 14中隐藏未上传图片时的破碎图片图标问题

你的问题出在*ngIf的判断逻辑上：imageulr + selectJobPostData.id即使在没有有效图片路径时，也可能被Angular视为真值（比如空字符串拼接ID会得到类似undefined123的非空字符串），导致<img>标签依然渲染，加载无效路径后显示破碎图标。以下是几种可行的解决方案：

方案1：严格判断有效路径 #

确保只有当imageulr和selectJobPostData.id都存在时才渲染图片：

<div id="task-description" data-ui-test="task-details-description">
    <p class=" kKZuUH"> | {{ selectJobPostData.detail }}
       <span style="float: left;">-</span>
       <span style="float: left;">Due date: {{ selectJobPostData.time_range.title }}</span>
    </p>

    <img *ngIf="imageulr && selectJobPostData.id"  
         [src]="imageulr + selectJobPostData.id" 
         style="width:250px"/>
    <div class="bubbles"></div>
</div>

方案2：处理图片加载错误 #

如果无法提前判断路径有效性，可监听图片加载失败事件，隐藏破碎图标：

<div id="task-description" data-ui-test="task-details-description">
    <p class=" kKZuUH"> | {{ selectJobPostData.detail }}
       <span style="float: left;">-</span>
       <span style="float: left;">Due date: {{ selectJobPostData.time_range.title }}</span>
    </p>

    <img *ngIf="imageulr + selectJobPostData.id"  
         [src]="imageulr + selectJobPostData.id" 
         style="width:250px"
         (error)="$event.target.style.display = 'none'"/>
    <div class="bubbles"></div>
</div>

方案3：结合后端标识判断（推荐） #

如果后端在用户未上传图片时，会在selectJobPostData中返回类似hasImage的布尔字段，直接用该字段判断更准确：

<div id="task-description" data-ui-test="task-details-description">
    <p class=" kKZuUH"> | {{ selectJobPostData.detail }}
       <span style="float: left;">-</span>
       <span style="float: left;">Due date: {{ selectJobPostData.time_range.title }}</span>
    </p>

    <img *ngIf="selectJobPostData.hasImage"  
         [src]="imageulr + selectJobPostData.id" 
         style="width:250px"/>
    <div class="bubbles"></div>
</div>

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