URL with brackets at Background Image Inline - lazyload
Enkirch opened this issue · 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.
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 + ')'; } });