Netlify images does not accept encoded image src

Support
1

Dear Netlify Support and Community

I am using Netlify Images CDN for my angular website. Unfortunately, angular encodes image URLs. That’s why the resulting url in my img elements’ src attribute looks like this:

[https://main--streetsurfclub.netlify.app/.netlify/images?url=https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEgsGt6jzEyLxYE0UeEYE7ilwtfPkWbq19kJu9CcwxewzrJXw1C1scaT48brCsQYoSEYIrWhj2MpkUusDGzk2CKS6oL3WMQwonayb_cSi7o-xZwwb57RsPc2cJRVWtQdYm8yTlSwFdRsYUgC1csK0YfdQPAjYEfeE2-SmGxA2shTgU5xx5_DlJZq%2Fs16000%2FIMG_20240709_205711232_HDR.jpg%26fit%3Dcover%26w%3D50%26h%3D50]

unfortunately, netlify image cdn is not able to handle this. if i manually decode the url (resulting in this):

[https://main--streetsurfclub.netlify.app/.netlify/images?url=https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEgsGt6jzEyLxYE0UeEYE7ilwtfPkWbq19kJu9CcwxewzrJXw1C1scaT48brCsQYoSEYIrWhj2MpkUusDGzk2CKS6oL3WMQwonayb_cSi7o-xZwwb57RsPc2cJRVWtQdYm8yTlSwFdRsYUgC1csK0YfdQPAjYEfeE2-SmGxA2shTgU5xx5_DlJZq%2Fs16000%2FIMG_20240709_205711232_HDR.jpg?fit=cover&w=500&h=500]

  • it works - how can i solve this?:

netlify site name: https://streetsurfclub.netlify.app/
DNS issues? -

  • Build problems -
  • Did you try Ask Netlify, our generative AI chatbot, before posting - yes
    The better the post - the faster the answer. - nice!
2

Can you share a minimal reproduction in an Angular site that we can check?

3

Hi Hrishikesh

Thanks for your answer. Please excuse my long delay. I was in holidays.

I set up a new angular app with github repo (GitHub - DonCorleone/netlify-images) and netlify site (https://netlify-images.netlify.app/) just to demonstrate you the behavior. While doing this, i found a solution; Like mentioned in the Angular Dev-Docs:

one must use standard w3c compatible html attibutes:

alongside with the querystring - parameters as mentioned here:

then, it works!

image
image2418×890 213 KB