search

aFarkas / lazysizes

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.
MIT License
17.5k stars 1.73k forks source link

URL with brackets at Background Image Inline - lazyload #917

Open Enkirch opened 3 years ago

Enkirch commented 3 years ago

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.

SpinboxPaul commented 7 months ago

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 + ')'; } });