Image not showing in angularjs, mobile

Question

Image not showing in ng-repeat, getting all data from indexeddb and binding to page everything show up expect img in blackberry 10 webworks

<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",
    },...

Answer 1

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

Answer 2

This wouldn't seem like an issue with IndexedDB.

For non-Angular directive attributes, such as src you want to interpolate as in the code below:

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

For Angular directive attributes, there's no need for such interpolation:

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

As your data is going to be undefined on bootstrap, you want to use the latter approach. It prevents the browser from trying to load undefined as an image source.

Also, please note vaibhav's comment above. Without a leading slash, you'll load the images directory as relative to the current. While that may be what you're going for, it's probably going to make your code more reusable to include the leading slash regardless.

Update: If you're in an ng-repeat, note that your scope is not the scope in which the ng-repeat directive appears but it's own, brand new scope. Perhaps try out $parent.item.Picture

Answer 3

I'm having the same problem, it occurs with the image filename having spaces in between , maybe we could write a directive the removes the space from the filename as I'm calling the image via other variable such as title..