Discord Badges (Refused to load the image)

[MaybeAnge]

Select Topic Area

Question

Body

Hello,
I've question
I made a badge for my profile, because it does not exist on the site https://img.shields.io/
So I have an SVG code that I created and hosted on my WEB server.
It works very well, but the problem is that the image I put does not load. However, I base64 encoded it, I added the CSP directive to my HTACCESS file but github still refuses to load the image, why?

My Badge: https://maybe-ange.com/assets/badges/easy-anti-cheat.svg

GitHub Link Badge: https://camo.githubusercontent.com/a96178cb8589d59dba7ff3aacf2653936844ec3772ee9c3fbdb9f21a18cd6be0/68747470733a2f2f6d617962652d616e67652e636f6d2f6173736574732f6261646765732f656173792d616e74692d63686561742e737667

[LiteBrite82]

Thanks for posting in the GitHub Community, @MaybeAnge !

We're happy you're here. You are more likely to get a useful response if you are posting your question in the applicable category, the Discussions category is solely related to conversations around the GitHub product Discussions. This question should be in the Profile category. I've gone ahead and moved it for you. Good luck!

[M-Aadhi]

It sounds like you've done a lot of the right things to get your badge working, but there are a few potential issues that could be causing problems with GitHub loading the image. Here are a few things to check:

Base64 Encoding: Make sure the base64 encoding is correct and the data URL is formatted properly. The URL should start with data:image/svg+xml;base64, followed by the base64-encoded data.

CSP Directive: Verify that the Content Security Policy (CSP) directive in your .htaccess file is correctly configured to allow the base64-encoded image. GitHub might have specific requirements or restrictions on CSP headers.

Image URL: Ensure the URL where you’re referencing the badge in your GitHub profile is correct. Sometimes a small typo can cause the image to not load.

Image Hosting: Double-check that your server is serving the image correctly. You might want to test accessing the image directly via a browser to ensure it's reachable and not restricted by server settings.

Cache Issues: Clear your browser cache or try accessing the badge from a different browser or incognito mode. Sometimes, old cached versions can cause issues.

GitHub Restrictions: GitHub has some restrictions on the types of images that can be used in profiles and repositories. Make sure your base64-encoded image complies with GitHub’s guidelines.

If you’ve checked all these aspects and the issue persists, you might want to consider using an alternative image hosting service that is known to be compatible with GitHub.

[Haruniv]

Hello!

It seems like you're trying to add a custom badge to your GitHub profile, but the image isn't loading. Here are a few ways to troubleshoot this issue:

Camo Proxy Issue: GitHub uses a Camo Proxy system to load external images securely. Sometimes, images may not load if there's an issue with the URL or file format.

Check the Image URL: Make sure the image URL is correct and uses HTTPS. GitHub doesn't support HTTP URLs for security reasons.

Base64 Encoding Issue: If you're using a Base64 encoded image, GitHub's CSP (Content Security Policy) might block it. Instead of Base64, try using a direct image URL.

Host the Image Elsewhere: Try hosting the image on a trusted platform, like within a GitHub repository itself. You can upload the image to a repository and then use that URL for the badge.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬