Flexslider 缩略图图像 Base64

Question

我正在使用 flexslider 组件制作带缩略图的轮播。如果我将 data-thumb 属性与图像路径一起使用，我可以正常使用该组件，但是，我没有图像路径，但我有 Base64。如何在 Base64 中使用带有图像的组件？

下面我的代码在没有 Base64 的情况下工作：

<div class="flexslider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
    <ul class="slides" style="width: 1200%; transition-duration: 0.6s; transform: translate3d(-2500px, 0px, 0px);"> 
        <div style="display: none;">
            <li data-thumb="images/si3.jpg" class="cnt-pi-model" aria-hidden="true" style="width: 625px; float: left; display: block;">
                <div class="thumb-image">
                    <img src="images/si3.jpg" data-imagezoom="true" class="img-responsive" draggable="false">
                </div>
            </li>
        </div>
    </ul>
</div>
<ol class="flex-control-nav flex-control-thumbs">                                    
    <li><img src="images/si3.jpg" draggable="false" class="flex-active"></li>
</ol>
<ul class="flex-direction-nav">
    <li class="flex-nav-prev"><a class="flex-prev" href="#">Previous</a></li>
    <li class="flex-nav-next"><a class="flex-next" href="#">Next</a></li>
</ul>
</div>

Answer 1

我通过制作一个将 Base64 转换为图像的通用处理程序来做到这一点，以便组件可以获得 url。

Flexslider 缩略图图像 Base64

Flexslider Thumb Image Base 64

html

javascript

jquery

flexslider