Is where way to mock image which comes from API with $httpBackend of angularjs?

Question

i'm doing protractor tests and using angular-mocks to "fake" requests. In my app where is one place where image should be displayed:

<img ng-src="api/documents/image/{{file.Id}}">

Is it possible to intrcept the request for getting image data and replace it by some fake image data, in the way things done with json?

$httpBackend.whenGET('api/documents/123').respond(200,[]);

Currently i'm getting broken image icons on the screen, which i prefer to be replaced by some fake images. I hope that it is possible...

Kind regards

You should give [`protractor-http-mock`](https://github.com/atecarlos/protractor-http-mock) a try. — alecxe, Jan 08 '15 at 14:24
Thanks , but i cannot see any examples of mocking image data... — happyZZR1400, Jan 08 '15 at 14:34

score 3 · Accepted Answer · answered Jan 09 '15 at 04:37

ngSrc just accepts an expression/static path - it doesn't perform an $http call which you can mock unless your expression is a function call to fetch images which is probably not what you want. I would recommend:

1) Add a config variable to your image paths that can be switched for dev/prod such as:

 ng-src="{{ baseUrl }}/api/documents/image/{{file.Id}}"

2) Point this baseUrl to a dev server which delivers whatever mock images you desire. You can create a simple Express server that delivers the same image for every request for example.

you are genius. Also found "grunt-express-server" task which can start the mock server before protractor starting to run — happyZZR1400, Jan 17 '15 at 21:19

Is where way to mock image which comes from API with $httpBackend of angularjs?

1 Answers1