
Research
Security News
Malicious PyPI Package Exploits Deezer API for Coordinated Music Piracy
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
ngx-picture
Advanced tools
A component to make properly sized images in next generation formats for Angular a bit easier.
A component to make properly sized images in next generation formats for Angular a bit easier.
npm i --save ngx-picture
This library is dependent on the Angular-cdk so if you haven't got that installed you can add it to your project with:
ng add @angular/cdk
Import NgxPictureModule into app.module.ts and call forRoot suppyling your config.
import { Breakpoints } from '@angular/cdk/layout';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DEFAULT_BREAKPOINTS, NgxPictureModule } from 'ngx-picture';
import { AppComponent } from './app.component';
// 1: supply a function to create the srcset urls for each breakpoint
export function srcInterpolator(url, imageFormat, breakpoint) {
let width: number;
switch (breakpoint) {
case Breakpoints.XSmall:
width = 300;
break;
case Breakpoints.Small:
width = 600;
break;
case Breakpoints.Medium:
width = 960;
break;
case Breakpoints.Large:
width = 1280;
break;
case Breakpoints.XLarge:
width = 1920;
break;
default:
width = 1280;
break;
}
return `${url.split('.')[0]}-${width}.${
imageFormat === 'jpeg' ? 'jpg' : 'webp'
}`;
}
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
,
NgxPictureModule.forRoot({
breakpoints: DEFAULT_BREAKPOINTS, //2. the break points to create sources for
imageFormats: ['webp', 'jpeg'], //3. the image formats to create sources for
srcInterpolator
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
<ngx-picture
src="assets/images/banner.jpg"
alt="test"
[lazyLoad]="true"
></ngx-picture>
If lazyLoad is true the componnent will use an IntersectionObserver (if it is supported by the browser) to only render the picture element if the component is in view.
*Remember Import the NgxPictureModule into the relevant module.
<picture>
<source
srcset="assets/images/banner-300.webp"
media="(max-width: 599.99px)"
/>
<source
srcset="assets/images/banner-600.webp"
media="(min-width: 600px) and (max-width: 959.99px)"
/>
<source
srcset="assets/images/banner-960.webp"
media="(min-width: 960px) and (max-width: 1279.99px)"
/>
<source
srcset="assets/images/banner-1280.webp"
media="(min-width: 1280px) and (max-width: 1919.99px)"
/>
<source srcset="assets/images/banner-1920.webp" media="(min-width: 1920px)" />
<source srcset="assets/images/banner-300.jpg" media="(max-width: 599.99px)" />
<source
srcset="assets/images/banner-600.jpg"
media="(min-width: 600px) and (max-width: 959.99px)"
/>
<source
srcset="assets/images/banner-960.jpg"
media="(min-width: 960px) and (max-width: 1279.99px)"
/>
<source
srcset="assets/images/banner-1280.jpg"
media="(min-width: 1280px) and (max-width: 1919.99px)"
/>
<source srcset="assets/images/banner-1920.jpg" media="(min-width: 1920px)" />
<img src="assets/images/banner.jpg" alt="test" />
</picture>
For a demo and stroybook for the component clone this repo and run it locally.
https://github.com/JayChase/ngx-picture.git
cd ngx-picture
npm i
npm run build
ng s
npm run storybook
FAQs
An Angular library to properly size, lazy load images, and use next generation formats
We found that ngx-picture demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.