Add corssorigin support

[RhinoLance]

This relates to applications that have the following header set: "Cross-Origin-Opener-Policy": "same-origin"

In such instances, any remote images need to have the "crossorigin" attribute added to the "img" tag.

What is the expected behavior?

The images load in the gallery

What is the current behavior?

Images don't load, with the following error: ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep

What are the steps to reproduce?

Add the following headers in angular.json under projects - app - architect - options:

"headers": { "Cross-Origin-Opener-Policy": "same-origin", "Cross-Origin-Embedder-Policy": "require-corp" }

What is the use-case or motivation for changing an existing behavior?

The only way to use this component in such an environment at the moment is to use a custom templates in order to add the crossorigin attribute:

<gallery id="gallery" <ng-container *galleryItemDef="let item; let type = type"> <img crossorigin galleryImage [src]="item.src"> </ng-container> <ng-container *galleryThumbDef="let item; let type = type"> <img crossorigin galleryImage [src]="item.src"> </ng-container> </gallery>

Which versions are you using for the following packages?

Angular: 18.0.0 Angular CDK: 18.0.1 Angular CLI: 18.0.1 Typescript: 5.4.5 Gallery: 11.0.0

Is there anything else we should know?

Further information abour CORS support for html elements can be found at https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image