If data-background-image is a data uri, background image will not show up

[edl7878]

If data-background-image is a data uri, background image will not show up

data-background-image="data:image/png;base64,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"

[Yelliiii]

Evet katkı lazim

[amelo1990]

[email protected]

• [email protected]

[neckish]

Hi, Same issue here. It was working with version 4.0.2.

[fgracia]

Hello,
Same issue, working with 4.1.0 but not above.

[cderv]

It took me time to found this opened issue but at least it gave me the opportunity to dig into why this was not working.

For the context, I am using reveal.js with Pandoc to produce --self-contained document. All images and other resources are base64 encoded.

I believe this issue is a regression that happens after 4.1.1 release, specifically after support for multiple background images in #2940 by @cmeessen

This is the new code now to create the background-image CSS style on the element:

reveal.js/js/controllers/slidecontent.js

Lines 103 to 108 in 0da9821

	// Images
	if( backgroundImage ) {
	backgroundContent.style.backgroundImage = backgroundImage.split( ',' ).map( background => {
	return `url(${encodeURI(background.trim())})`;
	}).join( ',' );
	}

The data-background-image is split on , which is causing the issue because data encoded URI will have a , necessarily:

data:[<mediatype>][;base64],<data>

from the spec https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs

That is why currently two url() call are created for the background-image style because the content is wrongly split into two elements

For example, source is

data-background-image="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApkZXNjAAAA/

But after reveal.js processes it, it gets wrongly split into two url() call

<div class="slide-background-content" style="background-image: url(&quot;data:image/jpeg;base64&quot;), url(&quot;/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApkZXNjAAAA/

It should not be split in that case.

<div class="slide-background-content" style="background-image: url(&quot;data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApkZXNjAAAA/

One solution would be to not split when data: field is found ?
Or possibly try another algorithm to support multiple images ?

I can try a PR if that helps.

And in any case, hope it helps get a fix for next version. Thanks!

[hakimel]

Thanks for debugging @cderv. This has been fixed now—reveal.js will not try to split background images in base64 format (i.e. beginning with data:).

[cderv]

Thanks !