scaleflex / ng-cloudimage-responsive Goto Github PK

Cloudimage responsive plugin will make your website load the exact image size you need depending on your user's screen size. Multiple pixel ratios are supported. Any questions or issues, please report to https://github.com/scaleflex/ng-cloudimage-responsive/issues

License: MIT License

JavaScript 3.38% TypeScript 40.21% CSS 21.29% HTML 35.11%

ng-cloudimage-responsive's People

Contributors

Stargazers

Watchers

Forkers

vitaly-shaposhnik jeandat wagdy-git mousikoficial quangtuan9237 fasterize

ng-cloudimage-responsive's Issues

Offset not working in ionic 5

Hi, i am using ci-img in a component to show product images in a grid layout. But the offset parameter doesnt do anything. The image gets loaded immediately when it comes into the viewport. Is there any example code on how this should work in ionic 5? My code is pretty much like:

...

Angular 14+ error: ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')

Hi,

Cloud image is not working with Angular 14+.

Error

core.mjs:7644 ERROR TypeError: Cannot read properties of undefined (reading 'nativeElement')
    at ImgComponent.processImage (ng-cloudimage-responsive.mjs:326:38)
    at ng-cloudimage-responsive.mjs:226:22
    at timer (zone.js:3155:47)
    at _ZoneDelegate.invokeTask (zone.js:443:35)
    at Object.onInvokeTask (core.mjs:26367:33)
    at _ZoneDelegate.invokeTask (zone.js:442:64)
    at Zone.runTask (zone.js:214:51)
    at ZoneTask.invokeTask (zone.js:525:38)
    at ZoneTask.invoke (zone.js:514:52)
    at data.args.<computed> (zone.js:3135:36)

package.json

"dependencies": {
    "@angular/common": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "@capacitor/app": "4.0.1",
    "@capacitor/core": "4.0.1",
    "@capacitor/haptics": "4.0.1",
    "@capacitor/keyboard": "4.0.1",
    "@capacitor/status-bar": "4.0.1",
    "@ionic/angular": "^6.1.9",
    "ng-cloudimage-responsive": "^3.0.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },

Git Repo:

https://github.com/Sampath-Lokuge/cloud-image-issue

Files:

https://github.com/Sampath-Lokuge/cloud-image-issue/blob/main/src/app/home/home.page.html

https://github.com/Sampath-Lokuge/cloud-image-issue/blob/main/src/app/app.module.ts

https://github.com/Sampath-Lokuge/cloud-image-issue/blob/main/src/app/home/home.module.ts

Steps to reproduce:

Clone the repo

npm i

ionic serve

Not working with angular 8

Angular 8 with or without ivy enabled gives the following error:

ERROR in node_modules/ng-cloudimage-responsive/lib/img/img.component.d.ts(53,32): error TS2307: Cannot find module '@angular/platform-browser/src/security/dom_sanitization_service'.
    node_modules/ng-cloudimage-responsive/lib/img/img.component.d.ts(54,28): error TS2307: Cannot find module '@angular/platform-browser/src/security/dom_sanitization_service'.
    node_modules/ng-cloudimage-responsive/lib/img/img.component.d.ts(55,33): error TS2307: Cannot find module '@angular/platform-browser/src/security/dom_sanitization_service'.
    node_modules/ng-cloudimage-responsive/lib/img/img.component.d.ts(56,34): error TS2307: Cannot find module '@angular/platform-browser/src/security/dom_sanitization_service'.
    node_modules/ng-cloudimage-responsive/lib/img/img.component.d.ts(57,30): error TS2307: Cannot find module '@angular/platform-browser/src/security/dom_sanitization_service'.
    node_modules/ng-cloudimage-responsive/lib/img/img.component.d.ts(58,39): error TS2307: Cannot find module '@angular/platform-browser/src/security/dom_sanitization_service'.
    node_modules/ng-cloudimage-responsive/lib/img/img.component.d.ts(59,36): error TS2307: Cannot find module '@angular/platform-browser/src/security/dom_sanitization_service'.

Rendering problem

Hello,

We are trying to use the plugin for our Angular Universal (9) project.
But we have an unexpected problem when we change img to ci-img.

Example with a logo :

<img src="https://storage.googleapis.com/riderclub-assets/images/logo_maif_white_v2.png" width="50" />

ci-img code :

        <ci-img
          src="https://storage.googleapis.com/riderclub-assets/images/logo_maif_white_v2.png"
          operation="width"
          size="50x39"
          style="width: 50px;" <!-- try to force with an image size of 50px -->
        ></ci-img>

But many styles are added on img and picture element rendering :

The image is completely deformed (100% full screen width instead of 50px width).

How can we remove style set on <picture> and <img> element ?

Thanks,

Change detection might not be handled properly

I'm using the latest version of your library (1.1.0) with angular 7.

In components using the OnPush strategy, images are never loaded until you execute ChangeDetectorRef.markForCheck(). In my tests, the only thing working is the ngAfterViewInit() callback like demonstrated in this demo. Sometimes, I even have to put it in a setTimeout().

IMO, this should be done by the library. Could you explain what is happening behind the scene and if that's even the right diagnostic. I'm just starting to use your library, I don't have much more to say for now.

Nota Bene:

the demo project has angular material has dependency but that was just a test, and the problem is reproducible without it.
tried to import the project in stackblitz and codesandbox but it didn't worked

Custom CNAME

Hi there,
is there currently a way - i am just overlooking - to use a custom CNAME instead of {token}.cloudimg.io?

Thanks in advance for your reply!

Angular SSR matchMedia is not definet

Hi,

I am using universal angular.
I can't fix the implementation of multiple screens.

my configuration in app.module:

const ciConfig = {
  token: '****',
  baseUrl: '**********',
  presets: {
    xs: '(max-width: 575px)', // up to 575    PHONE
    sm: '(min-width: 576px)', // 576 - 767    PHABLET
    md: '(min-width: 768px)', // 768 - 991    TABLET
    lg: '(min-width: 992px)', // 992 - 1199   SMALL_LAPTOP_SCREEN
    xl: '(min-width: 1200px)' // from 1200    USUALSCREEN
  }
};

<ci-img [src]="image.src" operation="crop" size='xs 500x600, md 1000x1350, lg 1400x1200, xl 1600x1000'></ci-img>

ERROR ReferenceError: matchMedia is not defined
    at /*/dist/web/server/main.js:171717:39
    at Array.find (<anonymous>)
    at CIService.getBreakPoint

Provide an Ivy bundle for Angular 13+

Since Angular removed the View Engine in Angular 13, would it be possible to distribute an Ivy build to speed up everyone builds time ?

At the moment the library works perfectly fine but the angular-cli still throws a warning regarding the matter:

Obviously, this is a low priority issue, but it would be nice to be able to get rid of this warning eventually.

How to use additionnal operation like 'fit' with blurred background ?

Hello,

We would like to use the operation 'fit' with a blurred background :

https://docs.cloudimage.io/go/cloudimage-documentation-v7/en/image-resizing/fit/blurred-background

Could you please provide us an example of integration by adding bg_img_fit=1&bg_opacity=0.85 ?

 <ci-img
              [src]="imageUrl"
              [operation]="'fit'"
              [size]="'172x92'"
            ></ci-img>

Thanks,

Problems with Angular 11 and SSR

Hi, I have a pretty simple implementation going on. I'm using an up-to-date Angular 11 (11.0.0).
Everything works fine with the client bundle, but it seems like the CIService is trying to utilize the window-object which crashes the Universal server bundle. So I think it has nothing to do with my Angular Core version, as the call of the window object should cause a problem in every version, right?
I tried to use the emptyOnSsr-attribute, but with no difference. My config object includes only the baseUrl and my token.

<ci-img [src]="image.src" [alt]="image.alt" ratio="0.73" [emptyOnSsr]="true"></ci-img>

ReferenceError: window is not defined
    at new CIService (___lorem___/dist/server/main.js:1:2372254)
    at Object.CIService_Factory [as factory] (___lorem___/dist/server/main.js:1:2376123)
    at R3Injector.hydrate (___lorem___/dist/server/main.js:1:1422934)
    at R3Injector.get (___lorem___/dist/server/main.js:1:1419953)
    at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
    at R3Injector.get (___lorem___/dist/server/main.js:1:1420163)
    at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
    at Object.get (___lorem___/dist/server/main.js:1:1592056)
    at lookupTokenUsingModuleInjector (___lorem___/dist/server/main.js:1:1331698)
    at getOrCreateInjectable (___lorem___/dist/server/main.js:1:1333937)
    at resolvePromise (___lorem___/dist/server/main.js:1:1138911)
    at resolvePromise (___lorem___/dist/server/main.js:1:1137852)
    at ___lorem___/dist/server/main.js:1:1140502
    at ZoneDelegate.invokeTask (___lorem___/dist/server/main.js:1:1129530)
    at Object.onInvokeTask (___lorem___/dist/server/main.js:1:1647103)
    at ZoneDelegate.invokeTask (___lorem___/dist/server/main.js:1:1129420)
    at Zone.runTask (___lorem___/dist/server/main.js:1:1122095)
    at drainMicroTaskQueue (___lorem___/dist/server/main.js:1:1133138) {
  rejection: ReferenceError: window is not defined
      at new CIService (___lorem___/dist/server/main.js:1:2372254)
      at Object.CIService_Factory [as factory] (___lorem___/dist/server/main.js:1:2376123)
      at R3Injector.hydrate (___lorem___/dist/server/main.js:1:1422934)
      at R3Injector.get (___lorem___/dist/server/main.js:1:1419953)
      at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
      at R3Injector.get (___lorem___/dist/server/main.js:1:1420163)
      at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
      at Object.get (___lorem___/dist/server/main.js:1:1592056)
      at lookupTokenUsingModuleInjector (___lorem___/dist/server/main.js:1:1331698)
      at getOrCreateInjectable (___lorem___/dist/server/main.js:1:1333937),
  promise: ZoneAwarePromise [Promise] {
    __zone_symbol__state: 0,
    __zone_symbol__value: ReferenceError: window is not defined
        at new CIService (___lorem___/dist/server/main.js:1:2372254)
        at Object.CIService_Factory [as factory] (___lorem___/dist/server/main.js:1:2376123)
        at R3Injector.hydrate (___lorem___/dist/server/main.js:1:1422934)
        at R3Injector.get (___lorem___/dist/server/main.js:1:1419953)
        at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
        at R3Injector.get (___lorem___/dist/server/main.js:1:1420163)
        at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
        at Object.get (___lorem___/dist/server/main.js:1:1592056)
        at lookupTokenUsingModuleInjector (___lorem___/dist/server/main.js:1:1331698)
        at getOrCreateInjectable (___lorem___/dist/server/main.js:1:1333937)
  },
  zone: Zone {
    _parent: Zone {
      _parent: null,
      _name: '<root>',
      _properties: {},
      _zoneDelegate: [ZoneDelegate]
    },
    _name: 'angular',
    _properties: { isAngularZone: true, maybeDelayChangeDetection: false },
    _zoneDelegate: ZoneDelegate {
      _taskCounts: [Object],
      zone: [Circular],
      _parentDelegate: [ZoneDelegate],
      _forkZS: null,
      _forkDlgt: null,
      _forkCurrZone: null,
      _interceptZS: null,
      _interceptDlgt: null,
      _interceptCurrZone: null,
      _invokeZS: [Object],
      _invokeDlgt: [ZoneDelegate],
      _invokeCurrZone: [Circular],
      _handleErrorZS: [Object],
      _handleErrorDlgt: [ZoneDelegate],
      _handleErrorCurrZone: [Circular],
      _scheduleTaskZS: [Object],
      _scheduleTaskDlgt: [ZoneDelegate],
      _scheduleTaskCurrZone: [Circular],
      _invokeTaskZS: [Object],
      _invokeTaskDlgt: [ZoneDelegate],
      _invokeTaskCurrZone: [Circular],
      _cancelTaskZS: [Object],
      _cancelTaskDlgt: [ZoneDelegate],
      _cancelTaskCurrZone: [Circular],
      _hasTaskZS: [Object],
      _hasTaskDlgt: [ZoneDelegate],
      _hasTaskDlgtOwner: [Circular],
      _hasTaskCurrZone: [Circular]
    }
  },
  task: ZoneTask {
    _zone: Zone {
      _parent: [Zone],
      _name: 'angular',
      _properties: [Object],
      _zoneDelegate: [ZoneDelegate]
    },
    runCount: 0,
    _zoneDelegates: null,
    _state: 'notScheduled',
    type: 'microTask',
    source: 'Promise.then',
    data: ZoneAwarePromise [Promise] {
      __zone_symbol__state: 0,
      __zone_symbol__value: ReferenceError: window is not defined
          at new CIService (___lorem___/dist/server/main.js:1:2372254)
          at Object.CIService_Factory [as factory] (___lorem___/dist/server/main.js:1:2376123)
          at R3Injector.hydrate (___lorem___/dist/server/main.js:1:1422934)
          at R3Injector.get (___lorem___/dist/server/main.js:1:1419953)
          at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
          at R3Injector.get (___lorem___/dist/server/main.js:1:1420163)
          at NgModuleRef$1.get (___lorem___/dist/server/main.js:1:1597431)
          at Object.get (___lorem___/dist/server/main.js:1:1592056)
          at lookupTokenUsingModuleInjector (___lorem___/dist/server/main.js:1:1331698)
          at getOrCreateInjectable (___lorem___/dist/server/main.js:1:1333937)
    },
    scheduleFn: undefined,
    cancelFn: undefined,
    callback: [Function],
    invoke: [Function]
  }
}

Add onLoad Output in ImgComponent

This is not really an issue but rather something I noticed that was missing from ImgComponent. I copied the code to my repository instead of using the package via NPM so I could add an Output in the original typescript code for the (load) event on the img tag. I needed the EventEmitter so I could determine if the $event.target was in landscape, portrait or panorama.

Maybe this can be added in the future?

What I changed:

...
@Output() imageLoaded: EventEmitter<any> = new EventEmitter<any>();

...
onImageLoad($event) {
    if (!this.isPreview) {
      this.isPreviewLoaded = true;
      this.isLoaded = true;
    } else if (this.isPreviewLoaded) {
      this.isLoaded = true;
    } else {
      this.isPreviewLoaded = true;
    }
    this.imageLoaded.emit($event);
  }
...

What I needed the code for:

imageLoaded($event) {
    if ($event.target) {
      if ($event.target.width && $event.target.height) {
        $event.target.classList.add(($event.target.width / $event.target.height) >= 1 ? 'landscape' : 'portrait');
        $event.target.classList.add($event.target.width > ($event.target.height * 2) ? 'panorama' : 'non-panorama');
        $event.target.classList.add('loaded');
      }
    }
  }

Thanks in advance!

I could also just make a PR if you want?

Package not working in Firefox and Edge

If you check code sandbox example from your README section, you will notice that an error occurs in Firefox and Edge browsers.

Firefox error: Invalid regexp group
Edge error: Unexpected quantifier

Package version: 1.0.1

I also tested in my own app and the same error occurs...

ci-img component doesn't react to input changes

If input parameters like src change over time, the component doesn't react. Indeed, only ngOnInit is implemented but ngOnChanges was forgotten.

No support yet for Angular 11+

Hi,

It gives this error. Any clue? Thanks!

ng update @angular/core @angular/cli

Package "ng-cloudimage-responsive" has an incompatible peer dependency to "@angular/common" (requires "^8.1.1" (extended), would install "11.2.11").
Package "ng-cloudimage-responsive" has an incompatible peer dependency to "@angular/core" (requires "^8.1.1" (extended), would install "11.2.11").
× Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.
See "C:\Users\Sampath\AppData\Local\Temp\ng-mxhhvu\angular-errors.log" for further details.

We use this version now with Angular 10 and no issues there:

"ng-cloudimage-responsive": "2.1.3",

Angular 14 support

Hi,

Is this compatible with Angular 14+? I can see that only with 13 yet. Any clue, please?

Lazyloading issue on static Map

Hello,

When we configure lazyloading to true in CIconfig, all image are loaded after a mouse scrolling, but on a Map (MapBox, Google, ...), the map can not be scrolled (because it's static) and images are not loaded.

Does it possible to add an option [lazyLoading] =" false " on ci-img than force to load the image without scroll waiting ?

Thanks,

Add Server Side Rendering

Hello,

We use Angular Universal (v9) for server-side rendering (better performance and SEO) but the plugin doesn't works server-side (only client side).

Could you add this feature ?
Could we have an estimation date about the development for this feature ?

Thanks for your help !

Found 5 high severity vulnerabilities on your Package

Hi,

Can you tell me how to solve this?

+ [email protected]
added 3 packages from 3 contributors, removed 6 packages and audited 1894 packages in 49.271s
found 5 high severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

I have run npm audit fix


added 1 package from 5 contributors, removed 5 packages and updated 1 package in 28.18s
fixed 1 of 5 vulnerabilities in 1894 scanned packages
  4 vulnerabilities required manual review and could not be updated

Still, 4 vulnerabilities are there.

npm audit

=== npm audit security report ===

                             Manual Review                                  
         Some vulnerabilities require your attention to resolve             
                                                                            
      Visit https://go.npm.me/audit-guide for additional guidance

High Prototype Pollution in node-forge

Package node-forge

Patched in >= 0.10.0

Dependency of firebase-tools [dev]

Path firebase-tools > @google-cloud/pubsub > google-auth-library
> gtoken > google-p12-pem > node-forge

More info https://npmjs.com/advisories/1561

High Prototype Pollution in node-forge

Package node-forge

Patched in >= 0.10.0

Dependency of firebase-tools [dev]

Path firebase-tools > @google-cloud/pubsub > google-gax >
google-auth-library > gtoken > google-p12-pem > node-forge

More info https://npmjs.com/advisories/1561

High Prototype Pollution in node-forge

Package node-forge

Patched in >= 0.10.0

Dependency of firebase-tools [dev]

Path firebase-tools > google-auth-library > gtoken >
google-p12-pem > node-forge

More info https://npmjs.com/advisories/1561

High Prototype Pollution in node-forge

Package node-forge

Patched in >= 0.10.0

Dependency of firebase-tools [dev]

Path firebase-tools > google-gax > google-auth-library > gtoken >
google-p12-pem > node-forge

More info https://npmjs.com/advisories/1561

found 4 high severity vulnerabilities in 1895 scanned packages
4 vulnerabilities require manual review. See the full report for details.

I have tried many solutions. But none of them solve this issue.

https://www.npmjs.com/advisories/1561

https://stackoverflow.com/questions/63900727/vulnerability-detected-in-node-forge

Include background image as it is the case in the react package

Hi,

Could you implement this feature on the NG package in order to use a progressive image in a background image css.

This functionality is present on the react project : scaleflex/react-cloudimage-responsive#4

Thanks in advance for your reply

Firebase Storage images are not working

Hi,

We're using your module on our Ionic app. But it is not working when an image is coming from Firebase Storage. Any clue?

Not working

<ci-img [src]="photoHandlerService?.userProfilePhotoChanged$ | async" #userProfilePhoto class="image-size" ratio="1"></ci-img>

Normal img tag and working fine:

<img [src]="photoHandlerService?.userProfilePhotoChanged$ | async" #userProfilePhoto class="image-size">

Sample Url format is like so (Note this is fake one. But the format is correct)

"https://firebasestorage.googleapis.com/v0/b/me.appspot.com/o/profile-photos%2Fn9foCFmwwwwwwJEuK9UbeAvnw7v1?alt=media&token=30aaaaa-5aaa-4aaa-8aaa-baaaaaa679e"

on firefox the image does not load properly when i navigate to an other page and then back

I test this on chrome it is works as it expected, but on firefox the thumb image does not refresh to the full image when i navigate to another page and then navigate to the previous page.
angular version: 8.1.2
ng-cloudimage-responsive version: 2.0.0

scaleflex / ng-cloudimage-responsive Goto Github PK

ng-cloudimage-responsive's People

Contributors

Stargazers

Watchers

Forkers

ng-cloudimage-responsive's Issues

Recommend Projects

Recommend Topics

Recommend Org