Why does Angular 19 CSP still blocks a Image URL even though it is allowed?

I’m working on an Angular 19 project, and I need to display a user-supplied image from Imgur. My index.html from the generated Angular project includes this Content Security Policy meta tag:

<meta http-equiv="Content-Security-Policy" content="
default-src 'self';
script-src 'self' 'unsafe-eval';
style-src 'self' 'unsafe-inline';
img-src http://localhost:4200 https://i.imgur.com https://cdn.discordapp.com data:;
font-src 'self' data:;
connect-src 'self' https://i.imgur.com https://cdn.discordapp.com https://api.clank.dev http://localhost:8081;
">


However, loading an Imgur image URL still fails - The Chrome Console says the following:

Refused to load the image 'https://i.imgur.com/8eajG1v.gif'
because it violates the following Content Security Policy directive:
"img-src 'self' data: https://cdn.discordapp.com".


i.imgur.com was explicitly whitelisted, yet Chrome’s console reports only 'self', data:, and cdn.discordapp.com as allowed sources for images.

Continue reading...