dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

fix issue with loading base64 images #2978

This commit is contained in:
hakimel 2021-09-28 13:02:16 +02:00
parent 0da9821e90
commit 05e57dea66
4 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/reveal.esm.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/reveal.js vendored
View File

File diff suppressed because one or more lines are too long

13
js/controllers/slidecontent.js
View File

@ -102,9 +102,16 @@ export default class SlideContent {
// Images // Images
if( backgroundImage ) { if( backgroundImage ) {
backgroundContent.style.backgroundImage = backgroundImage.split( ',' ).map( background => { // base64
return `url(${encodeURI(background.trim())})`; if( /^data:/.test( backgroundImage.trim() ) ) {
}).join( ',' ); backgroundContent.style.backgroundImage = `url(${backgroundImage.trim()})`;
}
// URL(s)
else {
backgroundContent.style.backgroundImage = backgroundImage.split( ',' ).map( background => {
return `url(${encodeURI(background.trim())})`;
}).join( ',' );
}
} }
// Videos // Videos
else if ( backgroundVideo && !this.Reveal.isSpeakerNotes() ) { else if ( backgroundVideo && !this.Reveal.isSpeakerNotes() ) {

4
test/test.html
View File

@ -36,7 +36,7 @@
<section data-background="examples/assets/image2.png" data-notes="speaker notes 2"> <section data-background="examples/assets/image2.png" data-notes="speaker notes 2">
<h1>2.1</h1> <h1>2.1</h1>
</section> </section>
<section> <section data-background-image="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdCIFhZWiAH3AABABkAAwApADlhY3NwQVBQTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA9tYAAQAAAADTLWxjbXMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAApkZXNjAAAA/">
<h1>2.2</h1> <h1>2.2</h1>
</section> </section>
<section> <section>
@ -769,10 +769,12 @@
QUnit.test( 'background images', function( assert ) { QUnit.test( 'background images', function( assert ) {
var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' ); var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' );
var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' ); 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 // 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( 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, 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' );
}); });