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