fix issue with loading base64 images #2978
parent
0da9821e90
commit
05e57dea66
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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() ) {
|
||||||
|
|
|
@ -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' );
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue