Anki Deck Images Not Showing

[damepatr]

Bug Description

The following Anki decks contain images:

• System Design
• System Design Exercises

However, the images in these Anki decks aren't getting displayed.

Example

Detailed Investigation

Here's the img element for the "Domain name system" card:

<img src="https://camo.githubusercontent.com/fae27d1291ed38dd120595d692eacd2505cd3a9c/687474703a2f2f692e696d6775722e636f6d2f494f794c6a34692e6a7067" data-canonical-src="http://i.imgur.com/IOyLj4i.jpg" style="box-sizing: content-box; max-width: 100%;">

I used curl to briefly test why the URL in the src attribute isn't referencing an image. Here's the results:

$ curl -i https://camo.githubusercontent.com/fae27d1291ed38dd120595d692eacd2505cd3a9c/687474703a2f2f692e696d6775722e636f6d2f494f794c6a34692e6a7067
HTTP/1.1 403 Forbidden
{OTHER HEADERS OMITTED}

Bad Signature

[damepatr]

It looks like this issue may be a broader GitHub issue. The official GitHub Community Discussions repository has been discussing it in community/community#102194. However, this discussion hasn't been active, and it was closed as off-topic.

[damepatr]

It seems like GitHub's Anonymized URLs feature is probably the cause. Additional information can be found here.

[damepatr]

Proposed Solution 1

Description

Instead of referencing URLs, we could download the images and add them to the following .apkg files:

• System Design.apkg
• System Design Exercises.apkg

Pros

• Offline Support: The images in these decks would be visible even when disconnected from the internet.
• No Implicit Dependencies: We would no longer be referencing resources that are not included in the Anki decks.

Cons

• Increased Deck Size: The amount of space needed to store the .apkg files in GitHub would increase.
• Potential Security Concerns: You may be able to add a malicious payload to the media files. This would require additional investigation.

[damepatr]

Proposed Solution 2

Description

Instead of referencing an anonymous URL that points to an image, we could directly reference the images found in the /images directory like this:

<img src="https://github.com/donnemartin/system-design-primer/blob/b7f255e469d0274b4e5c21fb6234cb918d5b0bde/images/0vBc0hN.png?raw=true" data-canonical-src="http://i.imgur.com/IOyLj4i.jpg" style="box-sizing: content-box; max-width: 100%;">

Pros

• No References To Other Websites: We wouldn't have to references images that are stored in Imgur. This seems to be the case because the data-canonical-src attribute of the img element is a URL to Imgur.
• Fewer Security Concerns: Anki deck users wouldn't have to download media files. GitHub would scan the media files before uploading, so there's a lower chance of malicious payloads hitting users.

Cons

• Requires Internet Connection: To see the image, you would have to be connected to the internet.
• Static Image References: The master branch will change overtime, and the images in this branch will also probably change. The Anki decks that users have downloaded will naturally get out of sync with the master branch, which can lead to broken images in the future.

[damepatr]

Personally, I prefer Proposed Solution 1. Thoughts?

[damepatr]

Related Thought: Why do we use .apkg files? Anki supports exporing and importing plain text files, so why not use plain text files since they would be better for tracking in Git?