无法显示联系人照片中的PhoneGap通过angularjs [英] Unable to display contact photo in phonegap through angularjs

问题描述

我能够读取并显示联系人照片从简单的HTML和JavaScript，但是当我用angularjs模型显示联系人的照片，我得到一个错误。以下是我的源$ C ​​$ C：

列表在这里我想显示联系人：

 ＆LT; UL类=清单＆GT;

   ＆LT;李类=项项缩略图左NG重复=，在contactList接触＆GT;
            ＆LT; IMG NG-SRC ={{contact.mphoto}}/＆GT; ＆LT;  - 当我直接把这个路径（即内容：//com.android.contacts/contacts/30/photo）！，我能够显示图像，但是当我从控制取水的时候，我我得到的错误：无法读取从资产文件夹联系人 - ＆GT;
           ＆LT; H2＆GT; {{contact.name}}＆LT; / H＆GT;
           ＆其中p为H.; {{contact.number}}＆所述; / P＆GT;

   ＆LT; /李＆GT;
＆LT; / UL＆GT;
 

下面是我的控制器设置ContactList：

  ContactService.find（），然后（函数（联系人）{
        对于（VAR I = 0; I＆LT; contacts.length;我++）
        {
            如果（联系人[I] .phoneNumbers！== NULL）
            {
                对于（VAR J = 0; J＆LT;联系人[I] .phoneNumbers.length; J ++）
                {
 VAR IMG =接触[I] .photos！= NULL？联系人[I] .photos [0] .value的：IMG /为Default.png;

                    $ scope.contactList.push（{名称：联系人[I] .name.formatted，编号：联系人[I] .phoneNumbers [J]。价值，mphoto：IMG}）
                }
            }
        }
 

解决方案

最后，这么多的挣扎后，我就可以找到问题，

请粘贴下面的线在你的App.js文件，问题会得到解决，不显示照片的原因是Angularjs增加了不安全的。如果它不被信任的每个URL之前

 配置（['$ compileProvider'，函数（$ compileProvider）{
            $ compileProvider.imgSrcSanitizationWhitelist（？/ ^ \ s *（HTTPS | FTP |文件|斑点|内容）：|数据：影像\ //）;
        }]）;
 

I am able to fetch and display the contact photo from simple html and javascript but when I use angularjs model to display the contact photo, I get an error. Following is my source code :

List where I am trying to display the contact :

<ul class="list">

   <li class="item item-thumbnail-left" ng-repeat="contact in contactList">
            <img ng-src="{{contact.mphoto}}"/> <!--When I put this path directly ( ie "content://com.android.contacts/contacts/30/photo"), I am able to display the image, but when I fetch it from the controller, I am getting error: "unable to read contacts from asset folder" -->
           <h2>{{contact.name}}</h2>
           <p >{{contact.number}}</p>

   </li>
</ul>

Here is my controller for setting ContactList :

ContactService.find("").then(function(contacts) {
        for (var i = 0; i < contacts.length; i++)
        {
            if (contacts[i].phoneNumbers !== null)
            {
                for (var j = 0; j < contacts[i].phoneNumbers.length; j++)
                {
 var img = contacts[i].photos  != null ? contacts[i].photos[0].value : "img/default.png";

                    $scope.contactList.push({name: contacts[i].name.formatted, number: contacts[i].phoneNumbers[j].value, mphoto: img})
                }
            }
        }

解决方案

Finally after so much struggle I'll be able to find the issue,

Please paste the below lines in your App.js file and problem will get solved and the reason for not showing photo is that Angularjs adds unsafe: before each url if it is not trusted.

 config(['$compileProvider', function($compileProvider) {
            $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content):|data:image\//);
        }]);

这篇关于无法显示联系人照片中的PhoneGap通过angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！