图片未在 angularjs、移动设备中显示答案

【问题标题】：Image not showing in angularjs, mobile图片未在 angularjs、移动设备中显示
【发布时间】：2014-03-13 05:22:12
【问题描述】：

图像未显示在 ng-repeat 中，从 indexeddb 获取所有数据并绑定到页面，一切都显示在 blackberry 10 webworks 中的期望 img

<img data-ng-src='{{item.Picture}}' width="100px;" height="100px;"/>

   {
    id:48758,
    Botanical_name:"Cladothamnus pyroliflorus",
    Common_name:"Himalayan Cotoneaster ",
    Picture: "images/Fplants/Cladothamnus pyroliflorus.png",
    },...

【问题讨论】：

尝试在 url 前添加斜杠 (/) 并从文件名中删除空格。
我认为这不是 indexeddb 的问题，而是图像的 url 不正确。
@user1024610 如果您在查看我的回答后仍然怀疑 IDB，请提供您的 IDB 代码。

标签： angularjs blackberry-webworks indexeddb

【解决方案1】：

这似乎不是 IndexedDB 的问题。

对于非 Angular 指令属性，例如 src，您希望按照以下代码进行插值：

<img src='{{item.Picture}}' width="100px;" height="100px;"/>

对于 Angular 指令属性，不需要这样的插值：

<img data-ng-src='item.Picture' width="100px;" height="100px;"/>

由于您的数据将在引导程序上为undefined，因此您希望使用后一种方法。它可以防止浏览器尝试将undefined 作为图像源加载。

另外，请注意上面 vaibhav 的评论。如果没有前导斜杠，您将加载 images 相对于当前目录的目录。虽然这可能是您想要的，但无论如何包含前导斜杠可能会使您的代码更可重用。

更新：如果您在 ng-repeat 中，请注意您的作用域不是出现 ng-repeat 指令的作用域，而是它自己的全新作用域。不妨试试$parent.item.Picture

【讨论】：

我尝试了以上所有方法，但仍然无法正常工作，，我的文件夹结构，www>images>Fplants
当我在浏览器中运行时出现其他想法
如果我使用 angularjs.org/img/AngularJS-large.png"> 它会出现
听起来像是范围问题。我没有注意到你在ng-repeat。更新了答案，但我之前关于插值的说明仍然适用。
我有 ng-repeat，我只是用图像 base64 字符串测试它的工作原理

【解决方案2】：

我有同样的问题，它发生在图像文件名之间有空格，也许我们可以编写一个指令，从文件名中删除空格，因为我通过其他变量（如标题）调用图像。

【讨论】：

【解决方案3】：

app.config(['$routeProvider','$compileProvider',function($routeProvider, $compileProvider){        $compileProvider.imgSrcSanitizationWhitelist('img/');

【讨论】：