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

X

Xon

Well-known member
Affected version
2.1.5
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]
Click to expand...

With lightbox and imageproxy, this somehow works.
 
Last edited:
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.
 
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 :(
 
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).
 
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.
 
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.
Click to expand...
There may be a delay before changes are rolled out to the XenForo Community.
 
Xon said:
Kicking that to using the template system instead of a hardcoded sprintf statement would be nice.
Click to expand...
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.
 
If anybody comes across this thread for similar reasons...

Chris D said:
Didn't want to change this for XF 2.1, but have made changes for XF 2.2 including removing the $imageTemplate property entirely.
Click to expand...
Looks like in XF 2.2 gold getAttachAlignClass was replaced in favor of using processImageDisplayModifiers values. If you have code using getAttachAlignClass then take a look src/XF/BbCode/Renderer/Html.php in renderTagAttach for what you need to update.


(I got caught in having add-on that worked fine with the betas but not the gold release. Whoops. 🤦‍♂️)
 
Back
Top Bottom