Fixed Empty alt/title tag causes image that failed to load to fail to render missing image

Affected version
2.1.5

Xon

Well-known member
Using Chrome; If a site isn't using the image proxy feature then a post with just the following bb-code generates a blank post;
[img]http://google.com[/img]
With lightbox and imageproxy, this somehow works.
 
Last edited:

Chris D

XenForo developer
Staff member
This seems to be exclusive to Chrome and it is acting rather suspiciously.

The broken image placeholder (which comes entirely from the browser) does not appear to display in this case but if you fiddle with the element inspector, sometimes it does display.

Usually the browser broken image placeholder appears and the element inspector will display it as being a 16x16px image. In this case it seems to be rendering that element with dimensions of 0x0.

We'll need to look into this, but it isn't currently clear while it is working like this.
 

Xon

Well-known member
Yeah, I just noticed it is only happening with Chrome (or Chrome-based Edge). Not including the empty alt or title tag appears to be the most reliable way of preventing Chrome from being wonky on this.

I've deployed a quick work-around on my sites which does this;
PHP:
    public function renderTagImage(array $children, $option, array $tag, array $options)
    {
        $result = parent::renderTagImage($children, $option, $tag, $options);
        $result = preg_replace(['#title="\\s*"#', '#alt="\\s*"#'], '', $result);

        return $result;
    }
The most annoying this is this actually affects the editor, so you have zero feedback about the image that failed to load when editing :(
 

Chris D

XenForo developer
Staff member
Not sure if a template edit is easier. lightbox_macros and just replace the existing alt attribute with:

Code:
{{ $alt ? 'alt="' . $alt|for_attr . '"' : '' }}
(Which may be our eventual fix but really this just seems like a Chrome bug).
 

Xon

Well-known member
There is XF\BbCode\Renderer\Html::$imageTemplate which is dumped into a sprintf statement as output when lightbox is disabled (ie the editor). My Lazy Load [img] add-on manipulates this, but I'm willing to bugfix it :p

Kicking that to using the template system instead of a hardcoded sprintf statement would be nice.
 

XF Bug Bot

XenForo bug fixer bot
Staff member
Thank you for reporting this issue, it has now been resolved. We are aiming to include any changes that have been made in a future XF release (2.1.6).

Change log:
Workaround a weird quirk where some browsers may not render a broken image placeholder if the alt/title attributes are empty.
There may be a delay before changes are rolled out to the XenForo Community.
 

Chris D

XenForo developer
Staff member
Kicking that to using the template system instead of a hardcoded sprintf statement would be nice.
Didn't want to change this for XF 2.1, but have made changes for XF 2.2 including removing the $imageTemplate property entirely.

That leaves the code in this state:
PHP:
return $this->templater->renderTemplate('public:bb_code_tag_img', [
   'lightbox' => !empty($options['lightbox']),
   'imageUrl' => $imageUrl,
   'validUrl' => $validUrl,
   'alignClass' => $this->getAttachAlignClass($option),
   'styleAttr' => $this->getAttachStyleAttr($option),
   'alt' => $this->getImageAltText($option)
]);
With the template now handling the fallback to non-lightbox:

HTML:
<xf:if is="$lightbox">
   <xf:macro template="lightbox_macros" name="single_image"
      arg-canViewAttachments="{{ true }}"
      arg-id="{{ unique_id() }}"
      arg-src="{$imageUrl}"
      arg-dataUrl="{$validUrl}"
      arg-alt="{$alt}"
      arg-styleAttr="{$styleAttr}"
      arg-alignClass="{$alignClass}" />
<xf:else />
   <img src="{$imageUrl}" data-url="{$validUrl}" class="bbImage {$alignClass}" {{ $alt ? 'alt="' . $alt|for_attr . '"' : '' }} style="{$styleAttr}" />
</xf:if>
Subject to change of course.
 
Top