Not uploading an image leads to a broken image link box in ionic

Forgive the headline, it’s an odd problem to describe.

i have an app that lets you upload a message that is text, and image, or both. On iOS when you upload just text, that’s what it shows, but when you upload just text on Android it shows a broken image box as well. Has anyone seen this before, I’ve tried googling it but haven’t got anywhere. Examples and code below.


Screenshot 2020-07-08 at 09.22.55

     <ion-col size="12">
              <p class="message-body-text" [innerHTML]="group.displayMessage.message"> </p>
              <ion-img *ngIf="blockPriority(group.displayMessage.isHidden) == 'no block'" class="messageimage" tappable src="{{group.displayMessage.url}}"></ion-img>

On the ionic lab if you inspect the element what do you get, are the urls to the image the same as on IOS? Or you could also debug the app running on android using chrome and inspect the element to see what url it points to.

This is probably whistling into the wind, but even if OP doesn’t want to listen, I would like to plead with anybody reading this: Don’t use innerHTML.

You will save yourself from a bunch of self-inflicted frustration, fighting with the framework about sanitization, and worrying about security in general. Use a DSL here for communicating with the backend. There is a reason that you see things like BBCode and Markdown so universally in apps that display user-generated content.

After some trial and error, I’ve discovered it’s the ion-img tag that’s causing it. if I use a normal img tag it doesn’t happen.