Hey everyone,
I’ve been trying to get this to work for a while to no avail.
So I created a node test server that serves up images.
app.get('/picture', function(req, res) {
res.type('jpg');
res.sendFile(__dirname + '/picture/image.jpg');
});
I have tested this and if I just navigate to the route “http://localhost:8080/picture” it will serve the picture in the browser no problem.
So in my ionic test app I have an image tag defined in the html like this:
<div class="list card">
<div class="item item-divider">
<button class="button" ng-click="imageButtonOnClick()">Get Image</button>
</div>
<div class="item item-body">
<img ng-src="{{image.uri}}" />
</div>
</div>
And in the controllers.js file I have the following:
$scope.image = {
uri: ''
};
$scope.imageButtonOnClick = function() {
$.ajax({
type: "GET",
url: "http://localhost:8080/picture/",
data: {
email: 'test@test.com,' // Want to deny serving image on invalid credentials
sessionId: '1234',
miscData: 'blah'
},
dataType: "text",
success: function(res) {
$scope.image.uri = 'data:image/jpg;base64,' + res;
$scope.$apply();
},
error: function(err) {
console.log('Error: ' + JSON.stringify(err));
}
});
};
I have the following as my whitelisting:
.config(function($compileProvider){
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|blob):|data:image\//);
})
When I click the button it just shows a blank outline like it tried to display the picture. The console has no errors. I can throw a console.log(res) in the success callback and it shows a series of bytes like this: ‘\u0012’. Some show as question marks since they are probably extended ascii characters.
When I try to send back a ‘png’ instead of a ‘jpg’ it shows an icon of a broken image and in the console it says: “Failed to load resource: net::ERR_INVALID_URL”
Anybody have an idea of where I am going wrong with this?
I found this post where he is trying to load the image in a canvas. If possible I don’t want to use a canvas.
Let me know if you need more information. I will provide what I can.
Thanks!