Best way to make use of the LiipImagineBundle in Javascript

In a Symfony4 project I'm using the LiipImagineBundle to resize images. There is a nice Twig filter for this so you can use it in your templates:

<img src="" alt="">

LiipImagine will then decide to return an URI that needs to resolve to a resized and cached version, or to provide the URI to the already cached version (which will result in a 304 response most of the time). The right URI is then rendered in your template.

But in my project I also load API data via Javascript. For example blog posts where a post can contain an URI to an image.

Now my question is: what is the best place to resize this image via LiipImagine?

A couple of options I tried:

• In the controller of the API set an URI to the resized image in the blog post model. But then you have to update the controller when you want to use different sizes in your view. And you have to set those URIs in every function of every controller that returns a blog post.
• In the service/repository set the URI when blog post models are loaded. But again this will be a problem when you want different sizes and does not fit "separation of concern".
• Create a controller that will receive a path to an image and resize parameters. This controller will then use LiipImagine to resize the image and get the cached URI. The controller will then redirect to the URI Liip has generated. But this will bypass the cache management of Liip and will always result in a redirect.

I did not find any hints in the documentation of LiipImagine so it would be great if someone could share some tips and tricks.