Add visual indication of broken image source when displaying the alt text

[samporapeli]

Sometimes, GPT inserts markdown image tags in its responses. These tags are correctly translated into HTML img tags, but more often than not the src attribute is incorrect. When this occurs, the alt text is displayed as intended. However, this can be confusing for users since there is no clear indication that an image is supposed to appear but is unavailable, leading to the display of the alt text instead. The alt text looks like a regular text response.

To improve user clarity, implement a fallback mechanism that provides a visual indicator when an image fails to load and the alt text is displayed. Additionally, ensure that users understand the alt text is displayed because the actual image couldn't be retrieved.

Example:

Response bubble HTML:

<div class="response-bubble message-bubble"><p>
    <img alt="Alt text" src="https://example.com/image.jpg">
</p></div>

[felixbade]

Thanks yeah I think the alt text should be inside a rectangle, so it looks like a broken image. Probably with sharp edges so it’s not confused with a code block.

I think this problem had become more common after the launch of GPT-4o.