Adding pictures to tutorial tips - Help!

I’m making MakeCode Arcade tutorials where I need to add images instead of blocks under the tip light bulb icon. I’ve read the documentation and tried to follow the instructions there, placing the images in a static directory and formatting them in terms of size and memory requirements, but I always end up getting just a broken image link icon popping up in the final product. Has anyone sucessfully added pictures to their tutorial tips? If you have, could you give me some pointers?

I found a solution myself from another user on GitHub. Just in case others come looking, here’s the solution I’ve used:

I couldn’t make the relative directory path as descrived in the tutorial docs work. What did work in the end was a raw link to the image on Github.

I placed the image in my /assets folder in the main repository for the tutorial files.
The link as seen in the browser when you’re viewing the image in GitHub will look something like this, using one of my own files as an example:

The raw link needed to link directly to the image without going through Git looks like this:

The code needed to show the image in the hints looks like this:

Border guard

I hope this helps someone. :slight_smile:

Dang. I feel like an idiot. I forgot this page uses Markdown and didn’t look at the preview while I was typing… Okay, let’s try this and see if I can force this page to display the example links:

Link to image as seen when browsing github:
[https://github.com/Yngel72/energygame/blob/master/assets/guardpost.jpg]

Raw link to the file as needed in code (remove square brackets):
[https://raw.githubusercontent.com/Yngel72/energygame/master/assets/guardpost.jpg]

Basically you need to swap “github” with “raw.githubusercontent” and remove the word blob from the url to create the raw link manually.

Link used in hint code to display image:
![Image description](Put raw link in here without the square brackets)

There. That’s about as good as it gets with my limited Markdown experience…

1 Like