LighBox, how to send array of base64 instead of urls to popu

Topic: LighBox, how to send array of base64 instead of urls to popup images

asked 5 years ago

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?

Add comment

Magdalena Dembna staff premium answered 5 years ago

0 0 Best answer

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>