如何在离线应用程序中显示base 64编码的字符串作为图像

时间:2016-07-12 12:13:47

标签: angularjs ionic-framework

我的代码在这里 这里$scope.student_photo是我获取编码字符串的变量 首先我在ajax中获取它并存储在本地db

$http.post(mData.url+'getStudentDetails/',{student_id : student_id} ).success(function(data){
                //$scope.student_pic = data.student_details[0].student_pic;
                //$scope.student_photo = data.student_details[0].student_photo;
            $scope.myImage=data.student_details[0].student_photo;
            //alert($scope.myImage);
            // var image_stu = data.student_details[0].student_photo;
             // localStorage.setItem("imageData", image_stu);
             // document.getElementById("img_stu").src='data:image/png;base64,' + image_stu;
    //alert("DONE");
                var events = data.student_details
                     var l = events.length;
                    //alert(l);

                    db.transaction(function(tx) {
                    tx.executeSql('SELECT * FROM dashboard ', [], function(tx, results){
                             if (results.rows.length == 0)
                             {
                                tx.executeSql("INSERT INTO dashboard(dashboard_id, stu_name,clas,sec,student_image) VALUES(?,?,?,?,?)", [ student_id,data.student_details[0].student_name, data.student_details[0].class_name, data.student_details[0].section_name,data.student_details[0].student_photo], function(tx, res) {
                                    $scope.dashboardDetails();
                                //alert('INSERTED');
                                }, function(e) {
                                    //alert('ERROR: ' + e.message);
                                }); 

                             }

                         });

                    });
            }); 
            $scope.showScreen = function(screen) {
                $state.go('app.'+screen);
            }
            $scope.printDashboard = function() 
            {
                //alert('ss');
                db.transaction(function (tx) {
                    // tx.executeSql('SELECT * FROM dashboard', [], function (tx, dtresult) {
                        //alert("dtresult.rows.length" + dtresult.rows.length);
                        // console.log("dtresult.rows.length" + dtresult.rows.length);
                        // $scope.totalrecords = dtresult.rows.length;
                    // });
                    tx.executeSql('SELECT * FROM dashboard', [], function (tx, dresult) {
                         console.log("dresult.rows.length" + dresult.rows.length);
                         dataset = dresult.rows;
                    console.log(dresult.rows);
                        for (var i = 0, item = null; i <  dresult.rows.length; i++) {
                        item = dataset.item(i);

                            $scope.dashboarditems.push({stu_name: item['stu_name'],stu_class: item['clas'],stu_sec: item['Sec'],stu_img: item['student_image']});
                            //$scope.items.push({id: item['notice_title'], notice:item['notice'], event_date: item['event_date']});
                            console.log($scope.dashboarditems[0]);
                        }
                    $state.go('app.dashboard');   
                    });
                }); 
            }   
            $scope.dashboardDetails = function()
            {
                var citems = [];
                syncWithServer(function(syncSuccess){
                    $scope.printDashboard();
                }, false);
            }

问题:

  

如何将base64字符串显示为image formate。

1 个答案:

答案 0 :(得分:0)

如果您的base64字符串出现在$scope.student_photo

尝试使用以下img标签在视图中显示图像

 <img ng-src="{{'data:image/png;base64,'+student_photo}}">