fix issue with loading base64 images #2978

hakimel · Sep 28, 2021 · 05e57de · 05e57de
1 parent 0da9821
commit 05e57de
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 6 deletions.
diff --git a/dist/reveal.esm.js b/dist/reveal.esm.js
diff --git a/dist/reveal.js b/dist/reveal.js
diff --git a/js/controllers/slidecontent.js b/js/controllers/slidecontent.js
@@ -102,9 +102,16 @@ export default class SlideContent {
 
 				// Images
 				if( backgroundImage ) {
-					backgroundContent.style.backgroundImage = backgroundImage.split( ',' ).map( background => {
-						return `url(${encodeURI(background.trim())})`;
-					}).join( ',' );
+					// base64
+					if(  /^data:/.test( backgroundImage.trim() ) ) {
+						backgroundContent.style.backgroundImage = `url(${backgroundImage.trim()})`;
+					}
+					// URL(s)
+					else {
+						backgroundContent.style.backgroundImage = backgroundImage.split( ',' ).map( background => {
+							return `url(${encodeURI(background.trim())})`;
+						}).join( ',' );
+					}
 				}
 				// Videos
 				else if ( backgroundVideo && !this.Reveal.isSpeakerNotes() ) {

diff --git a/test/test.html b/test/test.html
@@ -36,7 +36,7 @@ <h1>1</h1>
 					<section data-background="examples/assets/image2.png" data-notes="speaker notes 2">
 						<h1>2.1</h1>
 					</section>
-					<section>
+					<section data-background-image="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApkZXNjAAAA/">
 						<h1>2.2</h1>
 					</section>
 					<section>
@@ -769,10 +769,12 @@ <h1>4</h1>
 				QUnit.test( 'background images', function( assert ) {
 					var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' );
 					var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' );
+					var imageSource3 = Reveal.getSlide( 1, 1 ).getAttribute( 'data-background-image' );
 
 					// check that the images are applied to the background elements
 					assert.ok( Reveal.getSlideBackground( 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' );
 					assert.ok( Reveal.getSlideBackground( 1, 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' );
+					assert.ok( Reveal.getSlideBackground( 1, 1 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource3 ) !== -1, 'data-background worked' );
 				});