Dynamic images not getting load in ionic with angular for android mobile app


#1

this is path of image app/images/

            <img ng-src="/images/{{employee.pic}}" />

not loading dynamic images in my app.
how can i do this ?


#2

Maybe because you are including the slash at the beginning of the path, try putting this: <img ng-src="images/{{employee.pic}}" />


#3

still not working. any other solution? images are getting loaded in chrome emulator but arent getting loaded in mobile.


#4

I have no problem. I use the theme code from xMarston and i have no problems on my Android-Device.

<img class="sliderIMG" ng-src="img/products/{{productList1.value}}.gif">

Do u have wrong Controller init?


#5

Can you share a codepen recreating your problem?


#6

this is my html

<ion-header-bar align-title="center" class="toyota-tomato-background bar-positive" >
    <h1 class="title">Biz0s Employees</h1>
    <a class="button button-icon  ion-home button-clear button-light" style="color:#FFFFFF" ng-href="/search">
    </a>

</ion-header-bar>
<ion-view>

<div class="bar bar-subheader item-input-inset">
    <label class="item-input-wrapper">
        <i class="icon ion-ios7-search placeholder-icon"></i>
        <input id="searchKey" type="search" placeholder="Search" ng-model="searchKey" autocorrect="off" >
        <button class="button button-clear" ng-click="clearSearch()">X</button>
    </label>
    <button class="button button-clear" ng-click="search()">Search</button>
</div>

<ion-content class="has-header has-subheader">
    <ion-list>
        <ion-item ng-repeat="employee in employees" type="item-text-wrap" class="item-avatar"
                  href="#/employees/{{employee.id}}">
            <img ng-src="images/{{employee.pic}}" />

            {{employee.firstName}} {{employee.lastName}}
            <p>{{employee.title}}</p>
        </ion-item>
    </ion-list>
</ion-content>

this is my controller

angular.module(‘directory.controllers’, [])

.controller('EmployeeListCtrl', function ($scope, Employees) {

    $scope.searchKey = "";

    $scope.clearSearch = function () {
        $scope.searchKey = "";
        $scope.employees = Employees.query();
    }

    $scope.search = function () {
        $scope.employees = Employees.query({name: $scope.searchKey});
    }

    $scope.employees = Employees.query();

})

.controller('EmployeeDetailCtrl', function($scope, $stateParams, Employees) {
    console.log('details');
    $scope.employee = Employees.get({employeeId: $stateParams.employeeId});

})

.controller('EmployeeReportsCtrl', function ($scope, $stateParams, Employees) {
    console.log('reports');
    $scope.employee = Employees.get({employeeId: $stateParams.employeeId, data: 'reports'});

});

i also tried this for loading images…

app.config([’$compileProvider’, function($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|file|sms|tel|mailto):/);
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob):|data:image//);

}]);

This is my data

var employees = [
{“id”: 0, “firstName”: “Bhavin”, “lastName”: “Parekh”, “reports”: 4, “title”: “President and CEO”, “department”: “Corporate”, “cellPhone”: “617-000-0001”, “officePhone”: “781-000-0001”, “email”: "jking@fakemail.com", “city”: “Boston, MA”, “pic”: “James_King.jpg”, “twitterId”: “@fakejking”, “blog”: “http://coenraets.org”},
{“id”: 1, “firstName”: “Rajesh”, “lastName”: “Giramkar”, “managerId”: 0, “managerName”: “Bhavin Parekh”, “reports”: 2, “title”: “Sales Manager”, “department”: “Marketing”, “cellPhone”: “617-000-0002”, “officePhone”: “781-000-0002”, “email”: "jtaylor@fakemail.com", “city”: “Boston, MA”, “pic”: “account.png”, “twitterId”: “@fakejtaylor”, “blog”: “http://coenraets.org”},
{“id”: 2, “firstName”: “Shivaji”, “lastName”: “”, “managerId”: 0, “managerName”: “Bhavin Parekh”, “reports”: 0, “title”: “Sales Manager”, “department”: “Accounting”, “cellPhone”: “617-000-0003”, “officePhone”: “781-000-0003”, “email”: "elee@fakemail.com", “city”: “Boston, MA”, “pic”: “Eugene_Lee.jpg”, “twitterId”: “@fakeelee”, “blog”: “http://coenraets.org”},
{“id”: 3, “firstName”: “Kunal”, “lastName”: “Desai”, “managerId”: 0, “managerName”: “James King”, “reports”: 3, “title”: “Sales Manager”, “department”: “Engineering”, “cellPhone”: “617-000-0004”, “officePhone”: “781-000-0004”, “email”: "jwilliams@fakemail.com", “city”: “Boston, MA”, “pic”: “John_Williams.jpg”, “twitterId”: “@fakejwilliams”, “blog”: “http://coenraets.org”},
{“id”: 4, “firstName”: “Krishnaa”, “lastName”: “Tiwari”, “managerId”: 0, “managerName”: “James King”, “reports”: 2, “title”: “Developer”, “department”: “Engineering”, “cellPhone”: “617-000-0005”, “officePhone”: “781-000-0005”, “email”: "rmoore@fakemail.com", “city”: “Boston, MA”, “pic”: “Ray_Moore.jpg”, “twitterId”: “@fakermoore”, “blog”: “http://coenraets.org”},
{“id”: 5, “firstName”: “Dixit”, “lastName”: “Vicchi”, “managerId”: 0, “managerName”: “James King”, “reports”: 2, “title”: “Developer”, “department”: “Engineering”, “cellPhone”: “617-000-0005”, “officePhone”: “781-000-0005”, “email”: "rmoore@fakemail.com", “city”: “Boston, MA”, “pic”: “Ray_Moore.jpg”, “twitterId”: “@fakermoore”, “blog”: “http://coenraets.org”},

{"id": 6, "firstName": "Sandeep", "lastName": "Patel", "managerId": 3, "managerName": "John Williams", "reports": 0, "title": "Developer", "department": "Engineering", "cellPhone": "11111111", "officePhone": "781-000-0006", "email": "sandeeppatel344@gmail.com", "city": "Boston, MA", "pic": "Paul_Jones.jpg", "twitterId": "@fakepjones", "blog": "http://coenraets.org"},
{"id": 7, "firstName": "Vijay", "lastName": "Pawar", "managerId": 3, "managerName": "John Williams", "reports": 0, "title": "Developer", "department": "Engineering", "cellPhone": "617-000-0006", "officePhone": "781-000-0006", "email": "pjones@fakemail.com", "city": "Boston, MA", "pic": "Paul_Jones.jpg", "twitterId": "@fakepjones", "blog": "http://coenraets.org"},

{"id": 8, "firstName": "Jenil", "lastName": "Furia", "managerId": 1, "managerName": "Julie Taylor", "reports": 0, "title": "Developer", "department": "Engineering", "cellPhone": "11111111", "officePhone": "781-000-0009", "email": "kbyrne@fakemail.com", "city": "Boston, MA", "pic": "John_Williams.jpg", "twitterId": "@fakegdonovan", "blog": "http://coenraets.org"},
{"id": 9, "firstName": "Vidhi", "lastName": "Tiwari", "managerId": 4, "managerName": "Ray Moore", "reports": 0, "title": "Developer", "department": "Engineering", "cellPhone": "617-000-0010", "officePhone": "781-000-0010", "email": "kbyrne@fakemail.com", "city": "Boston, MA", "pic": "Kathleen_Byrne.jpg", "twitterId": "@fakekbyrne", "blog": "http://coenraets.org"},
{"id": 10, "firstName": "Naitik", "lastName": "Adani", "managerId": 4, "managerName": "Ray Moore", "reports": 0, "title": "Developer", "department": "Engineering", "cellPhone": "617-000-0011", "officePhone": "781-000-0011", "email": "ajones@fakemail.com", "city": "Boston, MA", "pic":"John_Williams.jpg", "twitterId": "@fakeajones", "blog": "http://coenraets.org"},
{"id": 11, "firstName": "Vishant", "lastName": "Dhandha", "managerId": 3, "managerName": "John Williams", "reports": 0, "title": "Mobile Developer", "department": "Engineering", "cellPhone": "617-000-0012", "officePhone": "781-000-0012", "email": "swells@fakemail.com", "city": "Boston, MA", "pic": "Steven_Wells.jpg", "twitterId": "@fakeswells", "blog": "http://coenraets.org"}

];

exports.findAll = function (req, res, next) {
var name = req.query.name;
if (name) {
res.send(employees.filter(function(employee) {
return (employee.firstName + ’ ’ + employee.lastName).toLowerCase().indexOf(name.toLowerCase()) > -1;
}));
} else {
res.send(employees);
}
};

exports.findById = function (req, res, next) {
var id = req.params.id;
res.send(employees[id]);
};

exports.findReports = function (req, res, next) {
var id = parseInt(req.params.id),
response,
reports = [],
employee;

response = {
    id: id,
    firstName: employees[id].firstName,
    lastName: employees[id].lastName,
    title: employees[id].title,
    pic: employees[id].pic
}

for (var i=0; i<employees.length; i++) {
    employee = employees[i];
    if (employee.managerId === id) {
        reports.push({id: employee.id, firstName: employee.firstName, lastName: employee.lastName, title: employee.title, pic: employee.pic});
    }
}

response.reports = reports;

res.send(response);

};


#7

where is the ng-controller in ur html?


#8

Got the same problem. It seems that the URL is constructed and the request sent without evaluating expressions beforehand:

Here’s my Link:

<img src="http://localhost:3000/image/{{image}}" />

An here’s the stack trace:
GET http://localhost:3000/image/{{image}} 500 (Internal Server Error) ionic.bundle.js:11720
forEach.html ionic.bundle.js:11720
JQLite.(anonymous function) ionic.bundle.js:11765
updateView ionic.bundle.js:42700
IonicModule.directive.directive.compile ionic.bundle.js:42674
nodeLinkFn ionic.bundle.js:15605
compositeLinkFn ionic.bundle.js:15005
compositeLinkFn ionic.bundle.js:15012
publicLinkFn ionic.bundle.js:14914
(anonymous function) ionic.bundle.js:43628
$get.Scope.$digest ionic.bundle.js:21355
$get.Scope.$apply ionic.bundle.js:21620
done ionic.bundle.js:17232
completeRequest ionic.bundle.js:17437
xhr.onreadystatechange ionic.bundle.js:17376

Update:
The whole thing apparently has to do with the slide-box. Everything outside the slide box works fine:

<ion-view title="{{poi.name}}">
    <ion-content scroll="false">
        <img ng-repeat="image in poi.images" src="{{host}}/image/{{image}}" />
    </ion-content>
</ion-view>

But putting this inside a slide box lead to the error described above:

<ion-view title="{{poi.name}}">
    <ion-content scroll="false">
        <ion-slide-box show-pager="true">
            <ion-slide ng-repeat="image in poi.images">
                <img src="{{host}}/image/{{image}}" />
            </ion-slide>
        </ion-slide-box>
    </ion-content>
</ion-view>

Update: Just change from src to ng-src and the wrong request is gone. Still having a problem with updating the images.


#9

I’m doing something similar … have radio buttons bound via model to local img files and when trying to update img ng-src to reflect choosen img it works once then only loads blank image. Web works fine … seems to be a device issue only. Did you ever figure out the update issue?


#10

I have the same issue, using ng-src with a url which contains handlebars works in ionic serve but not on devices or emulators e.g. ng-src=“img/team_shirts/{{fixture.homeTeam}}.svg”> whereas an explicit url works fine everywhere.

I’ve had to implement a workaround using explicit img urls and css which is a faff, is this a bug with the framework or just something that isn’t supported?


#11

I had a problem like that, i fixed it putting the variable in a $rootScope.employee, and call later in the img tag


#12

UPDATE: Turns out dynamic images load fine if:

  • You don’t use SVGs (my problem, for some reason only PNGs worked)

  • You prefix any image ng-src with ‘/img’ (use relative URL to image folder)

  • You use the whitelisting technique (inject the $compileProvider into your app.config method) and add this line into your app.config:

    $compileProvider.imgSrcSanitizationWhitelist(/^\s*(http|https|file|blob|cdvfile|content):|data:image//);

That’s what fixed it for me! Hope that helps someone.