AngularJS引导从base64图像旋转幻灯片数据

AngularJS Bootstrap carousel slide data from base64 image

本文关键字：旋转 幻灯片 数据 图像 base64 AngularJS      更新时间：2023-09-26

我正在与AngularJS Bootstrap旋转木马作斗争。作为图像源，它需要一个url到某个位置的图像。在我的例子中，要在carousel中显示的图像以base64格式存储在MongoDB中。为了检索图像，我在我的Angular控制器中做了一个数据库调用，结果我得到了一个base64图像数组。现在我想显示这些图像在Bootstrap旋转木马在我的HTML。为此，我使用AngularJS Bootstrap Carousel。HTML文件中的代码如下所示:

                <carousel interval="myInterval">
                    <slide ng-repeat="slide in slides" active="slide.active">
                        <img ng-src="{{slide.image}}?{{$index}}" style="margin:auto;" />
                        <div class="carousel-caption">
                            <h4>Slide {{$index}}</h4>
                            <p>{{slide.text}}</p>
                        </div>
                    </slide>
                </carousel>

我已经尝试从每个图像创建一个blob，然后从blob创建一个ObjectURL，将其转换为url作为旋转木马的数据源。但这不起作用，因为旋转木马不能处理blob作为图像源。控制器中生成blob的代码:

        angular.forEach(result, function(image) {
            var newWidth = 600 + $scope.slides.length + 1;
            var content = "data:" + image.contentType + ";base64," + image.body;
            var blob = new Blob([ content ], { type : image.contentType });
            var unsafeurl = (window.URL || window.webkitURL).createObjectURL(blob);
            var url = $sce.trustAsResourceUrl(unsafeurl);
            $scope.slides.push({image: url + newWidth + '/300'});       
        });

其中result为base64图像数组。我怎样才能让Angular Bootstrap carousel与我的base64图像源一起工作?这种旋转木马是不可能的，还是我需要使用默认的Bootstrap旋转木马与base64图像数组一起使用?我也想知道是否有可能创建一个图像url而不是对象url，因为我认为这可以解决我的问题。

问题出在旋转木马的HTML代码中。我修改了这一行:

    <img ng-src="{{slide.image}}?{{$index}}" style="margin:auto;" />

到这行:

    <img ng-src="{{slide.image}}" style="margin:auto;" />

现在carousel在IE和Chrome中都可以正常工作。

相关文章：