Load image using $resource in AngularJS

789 views Asked by At

I have a basic web app, with a Python/Flask backend exposing an image through the API as shown:

class ImageResource(Resource):
    def get(self):
        return send_file('path/to/file', mimetype='image/jpeg')
...
api.add_resource(ImageResource, '/v1/preview')

In AngularJS, I then have a factory which creates the API, providing access this as a $resource:

var previewResource = $resource('/v1/preview')

This would be easy enough if I could use the following HTML

<img ng-src="{{ imgUrl }}" />

with $scope.imgUrl set to '/v1/preview'.

The problem is that the controller where I want to actually get the image can only reference previewResource - with no knowledge of the path.

How can I use this to retrieve the image and have it displayed on the page?

--

For some additional context (in case it makes a difference), the image will be constantly changing so there will be some $timeout action to refresh it every few seconds. Again, here it would be easy if the path is known, as it would be possible to have a bit of JS to append ?(timestamp) to have the browser automatically reload it every time it changes.

0

There are 0 answers