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 ?
Maybe because you are including the slash at the beginning of the path, try putting this: <img ng-src="images/{{employee.pic}}" />
still not working. any other solution? images are getting loaded in chrome emulator but arent getting loaded in mobile.
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?
Can you share a codepen recreating your problem?
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);
};
where is the ng-controller in ur html?
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.
1 Like
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?
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?
I had a problem like that, i fixed it putting the variable in a $rootScope.employee, and call later in the img tag
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.