Question

我有一个特殊的问题，我似乎无法找到解释。

我正在为我们的家庭在AngularJS网站上工作，并整合来自各种网络服务的数据。目前我正在制作照片部分，它将整合我们的Flickr帐户中的照片。

我有一个主页面，其中列出了各种照片集，并显示了设置的主要照片以及标题。（注意：我使用Flickr＆＃39; extras＆＃39;参数在API调用中返回主要照片的网址。）

<div data-ng-repeat="p in vm.photoSets">
    <a ng-href="#/photos/{{p.id}}">
        <img ng-src="{{p.primary_photo_extras.url_s}}"></img>
    </a>
    <h4>{{p.title._content}}</h4>
</div>

点击照片时，路线会显示一个页面，其中包含该套装中所有照片的列表，显示图像和标题。

<div data-ng-repeat="p in vm.photoSetData.photo">
    <a ng-href="#/photos/{{vm.photoSetId}}/{{p.id}}"
        <img ng-src="{{p.url_s}}"></img>
    </a>
    <h4>{{p.title}}</h4>
</div>

现在，问题出现了。当我将代码上传到我的托管服务提供商的公共网站时，一切正常。两个页面都显示各自的照片。但是，当我尝试在本地系统上运行该站点时，无论是在MAMP还是NodeJS（使用http-server），第二页都会为每个图像提供错误：

Error: [$interpolate:interr] Can't interpolate: {{p.url_s}}
Error: [$sce:insecurl] Blocked loading resource from url not allowed by $sceDelegate policy.  URL: https://farm1.staticflickr.com/37/82749767_e82ff60ce3_m.jpg
http://errors.angularjs.org/1.2.9/$sce/insecurl?p0=https%3A%2F%2Ffarm1.staticflickr.com%2F37%2F82749767_e82ff60ce3_m.jpg
http://errors.angularjs.org/1.2.9/$interpolate/interr?p0=%7B%7Bp.url_s%7D%7D&p1=Error%3A%20%5B%24sce%3Ainsecurl%5D%20Blocked%20loading%20resource%20from%20url%20not%20allowed%20by%20%24sceDelegate%20policy.%20%20URL%3A%20https%3A%2F%2Ffarm1.staticflickr.com%2F37%2F82749767_e82ff60ce3_m.jpg%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.9%2F%24sce%2Finsecurl%3Fp0%3Dhttps%253A%252F%252Ffarm1.staticflickr.com%252F37%252F82749767_e82ff60ce3_m.jpg
minErr/<@http://localhost/scripts/angular.js:78
$interpolate/fn@http://localhost/scripts/angular.js:8254
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://localhost/scripts/angular.js:11800
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://localhost/scripts/angular.js:12061
done@http://localhost/scripts/angular.js:7843
completeRequest@http://localhost/scripts/angular.js:8026
createHttpBackend/</jsonpDone<@http://localhost/scripts/angular.js:7942
jsonpReq/doneWrapper@http://localhost/scripts/angular.js:8039
jsonpReq/script.onerror@http://localhost/scripts/angular.js:8053

对Flickr的API调用成功并返回正确的数据。事实上，图像标题确实显示！我已经使用Firefox，Safari和Chrome对它进行了测试......所有三个浏览器都失败了。

我无法找到任何解释为什么它可以远程工作但在本地失败。此外，图像显示在第一页上，但不显示在第二页上，即使第二页上的一个图像是与第一页上相同的图像URL。即使绕过第一页直接进入第二页，仍然会失败。

有关如何解决此问题的任何想法？每次进行更改时，无需上传到服务器就可以在本地进行测试。

更新我关闭了$ sce安全性，看看是否导致问题。虽然它导致错误关闭，但文件仍然无法加载到本地测试服务器上。我使用过开发者工具＆＃39;网络监视器，它甚至没有显示检索文件的尝试。虽然正确的路径显示在DOM中，但AngularJS似乎会关闭检索。

Answer 1

根据症状，第二页似乎出现了问题。浏览完DOM后，我注意到a和img标签有些奇怪。似乎整个img标记已嵌入a标记。

所以，我回到html标记并注意到缺少的右括号。整个问题是由a标记未正确关闭引起的。

我仍然试图了解AngularJS抛出的错误以及它与错误标记的关系。

在本地主机测试服务器上加载图像时出错

1 个答案: