Need to hide a broken image icon in angular-CodePudding

i have a form where user can upload pictures with text fields. Image isn't mandatory. But when user don't upload the image, then on result page a broken image icon appears. i am using angular 14.

Here is what i have tried so far but that didn't work

<div id="task-description" data-ui-test="task-details-description">
    <p > | {{ 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 ></div>
</div>

CodePudding user response：

If you want to hide the broken one just add alt="" & one rror="this.style.display='none'" it will not show a corrupt thumbnail and any alt message

<img src="pic_trulli.jpg" alt="" one rror="this.style.display='none'"/>

CodePudding user response：

This is not specific to angular but you can add an onerror handle.

<img src="Error.src" one rror="this.style.display='none'"/>