AngularJS: What's the best way to load different versions of images?

Question

css

Hello. The essence of the question is this: there are two versions of the layout (<992px and >992px respectively), I want to load only x or 2 images for a certain version (we are talking about the img tag, not about background-image).
What solution do I see:

// в шаблоне 
<img ng-src="/images/pic5-{{screen}}.jpg">

//в контроллере или директиве
$scope.screen = $window.screen.width >=992 ? 'lg' : 'sm'
$window.bind('resize', function {
 $scope.screen = $window.screen.width >=992 ? 'lg' : 'sm'
})

Well, in general, the essence is clear, 'listening' to the resize event and changing the url of the picture.
How did you solve such a problem, if any? maybe there is some other best practice or plugin with abstraction?

Answer 1

I would at least wrap all this goodness in a directive in which I would load it with AJAX if necessary, so that the picture does not disappear for an indefinite time when resizing.
At the resize event, I would check if something has changed.
Those. if it was already less than 992 and less is left - do nothing.
And with changes, I would throw event. This is much more versatile than binding to $scope.
The directive would accordingly be subscribed to this event.

Answer 2

For this purpose, use the element <pictures>. It's a native HTML approach to accomplish this task. It allows you to write media queries directly in the markup... and more. For more information, I advise you to watch the report of Vadim Makeev on this topic: https://www.youtube.com/watch?v=Szo-2D7TtEU