Placeholder background-image has an invalid property

[lennonpuype]

Describe the bug

We want to show the image as placeholder using the loading() and placeholder() methods on the pictureTag.

My setup

I just did a simple render of an image an turned on the placeholder option.
{{ asset.imageOptimize.pictureTag().placeholder('image').loading('lazy').render() }}

What is happening

The background-image style property has a value with a space inside and is ending with a : which are not allowed in that line. When these are gone, it works as expected:

Versions

• Plugin version: 5.0.0-beta.1
• Craft version: 5.0.0

[khalwat]

Wow, this was an interesting one. It's actually a bug in Craft's Html::tag() function, which inserts whitespace where it shouldn't be.

I filed an issue here: craftcms/cms#14964

[khalwat]

Fixed in the above commits.

Craft CMS 3:

You can try it now by setting your semver in your composer.json to look like this:

    "nystudio107/craft-imageoptimize": "dev-develop as 1.6.54”,

Then do a composer clear-cache && composer update

…..

Craft CMS 4:

You can try it now by setting your semver in your composer.json to look like this:

    "nystudio107/craft-imageoptimize": "dev-develop-v4 as 4.0.8”,

Then do a composer clear-cache && composer update

…..

Craft CMS 5:

You can try it now by setting your semver in your composer.json to look like this:

    "nystudio107/craft-imageoptimize": "dev-develop-v5 as 5.0.1”,

Then do a composer clear-cache && composer update

[robzor]

Hi there, sorry to thread ressurect but I am getting this issue on version 5.0.1 / Craft 5.2.0. The OP posted an example with an encoded jpeg, but on our site it's with an encoded SVG.

<img class="lazyload" src="<img url here>" width="1440" height="1223" alt=" " style="background-image: url(data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%271440%27 height=%271223%27 style=%27background:%23CCC%27 /%3E); background-size: cover;" loading="lazy">

Is this the same issue or a different one?

[khalwat]

Looks similar, but slightly different. Can you make a new issue with it?