-1

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 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>
Team Thunder
  • 91
  • 2
  • 9
  • Does this answer your question? [How to hide image broken Icon using only CSS/HTML?](https://stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html) – R. Richards Nov 07 '22 at 13:54

2 Answers2

2

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

<img src="pic_trulli.jpg" alt="" onerror="this.style.display='none'"/>
Team Thunder
  • 91
  • 2
  • 9
0

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

<img src="Error.src" onerror="this.style.display='none'"/>
Matthieu Riegler
  • 31,918
  • 20
  • 95
  • 134