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

Answer 1

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.