title: Flexslider Thumb Image Base 64
body: <p>I'm using the flexslider component to make a carousel with thumbnails. I can use the component normally if I use the <strong>data-thumb</strong> attribute with the image path, however, I do not have the image path but I have the Base64. How can I use the component with images in Base64?</p>
  
  <p>Below my code working without Base64:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flexslider"&gt;
  &lt;div class="flex-viewport" style="overflow: hidden; position: relative;"&gt;
      &lt;ul class="slides" style="width: 1200%; transition-duration: 0.6s; transform: translate3d(-2500px, 0px, 0px);"&gt; 
          &lt;div style="display: none;"&gt;
              &lt;li data-thumb="images/si3.jpg" class="cnt-pi-model" aria-hidden="true" style="width: 625px; float: left; display: block;"&gt;
                  &lt;div class="thumb-image"&gt;
                      &lt;img src="images/si3.jpg" data-imagezoom="true" class="img-responsive" draggable="false"&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/div&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;ol class="flex-control-nav flex-control-thumbs"&gt;                                    
      &lt;li&gt;&lt;img src="images/si3.jpg" draggable="false" class="flex-active"&gt;&lt;/li&gt;
  &lt;/ol&gt;
  &lt;ul class="flex-direction-nav"&gt;
      &lt;li class="flex-nav-prev"&gt;&lt;a class="flex-prev" href="#"&gt;Previous&lt;/a&gt;&lt;/li&gt;
      &lt;li class="flex-nav-next"&gt;&lt;a class="flex-next" href="#"&gt;Next&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>