I have an angular application that can display youtube videos via a popup window. To open the popup window, the user has to press on a youtube thumbnail image. This thumbnail image is requested using the following url: https://i.ytimg.com/vi/<youtube video id>/1.jpg for instance https://i.ytimg.com/vi/zOnQbryNQJE/1.jpg.
This image is displayed just fine when i'm running the app locally on my computer.
But as soon as I serve the application from a cloudfront distribution, the image generated with https://i.ytimg.com/vi/zOnQbryNQJE/1.jpg is no longer displayed. but shows a broken image file icon where the thumbnail image should be.
The annoying part is that the networks tab of Chrome does not even display the request to https://i.ytimg.com/vi/zOnQbryNQJE/1.jpg as if the request was never made in the first place. Image requests coming from the same origin are displayed correctly.
I've tried using the crossorigin="anonymous" attribute but that has no effect. Its not just the youtube image that won't display when the app isn't running locally, the problem occurs when using any image from the web that comes from a different origin.
My code looks like this:
<img loading="lazy" crossorigin="anonymous" (load) = "journalEntryImage.imageLoading = false" (error)="journalEntryImage.imageLoading = false; journalEntryImage.addYoutubePlayIconToThumbnail = false" [src]="journalEntryImage.thumbnailImageUrl" [alt]="journalEntryImage.id" class="centerCropImage product-image clickable" (click)="showFullImageDialog(journalEntryImage)" />
I've tried removing loading=lazy to see if that made any difference which it didn't. How do i display images from another website in my angular webapplication?
EDIT:
I also tried using [src]=sanitizer.bypassSecurityTrustUrl(urlString)
but this causes a loop where the youtube image url isn't requested but www.wqeqwvst2.cloudfront.net/null. The statuscode is 304. I have no idea what its doing.