Topic: LighBox, how to send array of base64 instead of urls to popup images
Component mdb-lightbox has :imgs property which require array of images urls. How can I supply array of base64 representation of those images??? I couldn't find any info in docs describing :imgs property. So that instead of
<mdb-lightbox :imgs=["image1.jpg", "image2.jpg"]
I could do something like
<mdb-lightbox :imgs=["data:image/jpeg;base64,/9j/2wBDAAYEBQYFBA", "data:image/jpeg;base64,/8j/4wBDAAYEBQYFDB"]
Tests showed that base64 string array fails to open popup image with message "Cannot read property 'img' of undefined". Should I create an object with a certain property?
Thanks Magdalena! It really works. My bad, I made a typo, missed comma after base64 word. Thank you again, your answer pointed to my error.!
I have replaced on of urls in our example with base64 and it seems to work fine. Make sure that your encoding is correct - you can try this decoder to check: https://www.opinionatedgeek.com/codecs/base64decoder
<template>
<section>
<mdb-container class="mt-5">
<mdb-row class="mdb-lightbox no-margin">
<mdb-col md="4" @click.native="show(0)">
<figure>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(117).jpg"
class="img-fluid"
alt
/>
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(1)">
<figure>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(98).jpg"
class="img-fluid"
alt
/>
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(2)">
<figure>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(131).jpg"
class="img-fluid"
alt
/>
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(3)">
<figure>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(123).jpg"
class="img-fluid"
alt
/>
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(4)">
<figure>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(118).jpg"
class="img-fluid"
alt
/>
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(5)">
<figure>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(128).jpg"
class="img-fluid"
alt
/>
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(6)">
<figure>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(132).jpg"
class="img-fluid"
alt
/>
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(7)">
<figure>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(115).jpg"
class="img-fluid"
alt
/>
</figure>
</mdb-col>
<mdb-col md="4" @click.native="show(8)">
<figure>
<img
src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(133).jpg"
class="img-fluid"
alt
/>
</figure>
</mdb-col>
</mdb-row>
</mdb-container>
<mdb-lightbox
:visible="visible"
:imgs="imgs"
:index="index"
@hide="handleHide"
></mdb-lightbox>
</section>
</template>
<script>
import { mdbLightbox, mdbContainer, mdbRow, mdbCol, mdbIcon } from "mdbvue";
export default {
components: {
mdbLightbox,
mdbContainer,
mdbRow,
mdbCol,
mdbIcon
},
data() {
return {
imgs: [
"data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==",
"https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(98).jpg",
"https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(131).jpg",
"https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(123).jpg",
"https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(118).jpg",
"https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(128).jpg",
"https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(132).jpg",
"https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(115).jpg",
"https://mdbootstrap.com/img/Photos/Horizontal/Nature/12-col/img%20(133).jpg"
],
visible: false,
index: 0,
};
},
methods: {
show(index) {
this.index = index;
this.visible = true;
},
handleHide() {
this.visible = false;
},
}
};
</script>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 6.0.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No