lazysizes icon indicating copy to clipboard operation
lazysizes copied to clipboard

URL with brackets at Background Image Inline - lazyload

Open Enkirch opened this issue 2 years ago • 1 comments

unfortunately I have a little problem here with images that can be uploaded by users. A few images have round brackets. With an image tag these are displayed, but I also have background images here.

The URL looks like this (domain, folder name adjusted)

`http://mydomain.de/user-uploads/6103c39498d86/WhatsApp` Image 2021-04-12 at 10.29.24 (1)-sm.jpeg`

The PHP output is this, if i echo the $image_url you see the full url include the bracktes and the file extension

style="background-image:url('<?php echo $image_url;?>');">

The HTML output is then

style="background-image: url("mydomain.de/user-uploads/6103c39498d86/WhatsApp Image 2021-04-12 at 10.29.24 (1");" data-bg="http://localhost/wkdm/wp-content/user-uploads/Aeon-laka-6103c39498d86/WhatsApp Image 2021-04-12 at 10.29.24 (1"`

If i turn off lazy load, it works. But with lazyload enabled, then the URL breaks with the round bracket.

Enkirch avatar Aug 04 '21 06:08 Enkirch

My fix for this was to escape the parenthesis within my background image function...

document.addEventListener('lazybeforeunveil', function (e) { var bg = e.target.getAttribute('data-bg'); if (bg && bg.length) { bg = bg.replaceAll('(', '\\(').replaceAll(')', '\\)'); e.target.style.backgroundImage = 'url(' + bg + ')'; } });

SpinboxPaul avatar Mar 08 '24 11:03 SpinboxPaul