0

I'm building an angular 2 website where only authenticated users can access content. Some of this content is peoples photos, to which access must be restricted to authenticated users only. Furthermore, these images should be delivered in an optimized fashion depending upon the device calling them; for example, a retina mobile screen, or an old-fashioned laptop.

Any ideas about how (or the best practices) to achieve this correctly?

Sammy
  • 3,395
  • 7
  • 49
  • 95

1 Answers1

0

We do something like this, but we don't use angular for it, we use css to determine which images to display. Separate classes with the images attached for them based on viewports. Are you wanting a angular 2 specific answer? Or will the viewports displaying different images work?

QT Ray
  • 1,256
  • 8
  • 12
  • Thank you, but I'm actually not sure I understand what your CSS would look like exactly, and how this would tackle the security issue. – Sammy Mar 12 '17 at 17:14
  • There would be a lot of code involved for sure. But on the CSS side you would have your 2x images for retina display and it would be something like (if using raw CSS) `@media (min-width: 700px) { background: yourImageRules } ` In your html, you will have to have your service set up to detect what type of user you have coming in. If you have a login service, I'm sure you have a security type on the user object that you can map to. You can do an *ngIf to check the security type the user has and display the images that way. – QT Ray Mar 12 '17 at 17:36