# Path for Images in Tutorial on github

**URL:** https://forum.makecode.com/t/path-for-images-in-tutorial-on-github/3179
**Category:** micro:bit
**Created:** [August 20, 2020, 10:31pm UTC](https://forum.makecode.com/t/path-for-images-in-tutorial-on-github/3179 "2020-08-20T22:31:50Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![agc24](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/agc24/32/503_2.png) [@agc24](https://forum.makecode.com/u/agc24)
#### Post date: [August 20, 2020, 10:31pm UTC](https://forum.makecode.com/t/path-for-images-in-tutorial-on-github/3179/1 "2020-08-20T22:31:50Z")

</div>

More tutorials on github questions.

I would like to add some images to some of the hints in my tutorials. How should I embed the images in the hints? It seems like its looking in a docs/static directory however I’m not sure exactly where to place that in my project. I tried linking the absolute path but even that didn’t work.

Thanks!

---

<div class="post-metadata">

### Author: ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)
#### Post date: [August 21, 2020, 5:15pm UTC](https://forum.makecode.com/t/path-for-images-in-tutorial-on-github/3179/2 "2020-08-21T17:15:34Z")

</div>

I think if you put docs/static in the root of the repo it should work (but I have not tested it)

---

<div class="post-metadata">

### Author: ![agc24](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/agc24/32/503_2.png) [@agc24](https://forum.makecode.com/u/agc24)
#### Post date: [August 24, 2020, 2:21pm UTC](https://forum.makecode.com/t/path-for-images-in-tutorial-on-github/3179/3 "2020-08-24T14:21:05Z")

</div>

It still doesn’t work for me when I do that. It also doesn’t work if I just put in a URL that links to an image (e.g., [https://github.com/schoolwidelabs/sensor-immersion/blob/master/docs/static/tutorials/co2.png](https://github.com/schoolwidelabs/sensor-immersion/blob/master/docs/static/tutorials/co2.png)). Do I need to update the pxt.json? If yes, how should I update it? I tried adding both the path to image file itself (error when trying to pull repo into makecode) and adding the docs directory as a dependency and neither worked. Any guidance would be appreciated. And potentially update the instructions on the [https://makecode.com/writing-docs/tutorials](https://makecode.com/writing-docs/tutorials).

Thanks!  
Alex

---

<div class="post-metadata">

### Author: ![peli](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/peli/32/12_2.png) [@peli](https://forum.makecode.com/u/peli)
#### Post date: [August 24, 2020, 2:45pm UTC](https://forum.makecode.com/t/path-for-images-in-tutorial-on-github/3179/4 "2020-08-24T14:45:47Z")

</div>

Assuming your custom tutorial repository has github pages turned on, you would need to inline the full image url in the markdown, not just the relative path.

So in your case, you would want to use [https://schoolwidelabs.github.io/sensor-immersion/static/images/co2.png](https://schoolwidelabs.github.io/sensor-immersion/static/images/co2.png)

---

<div class="post-metadata">

### Author: ![agc24](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/agc24/32/503_2.png) [@agc24](https://forum.makecode.com/u/agc24)
#### Post date: [August 24, 2020, 5:26pm UTC](https://forum.makecode.com/t/path-for-images-in-tutorial-on-github/3179/5 "2020-08-24T17:26:41Z")

</div>

Oh okay that worked to use the github pages link. I could also link the raw image found at [https://raw.githubusercontent.com/schoolwidelabs/sensor-immersion/master/static/images/co2.png](https://raw.githubusercontent.com/schoolwidelabs/sensor-immersion/master/static/images/co2.png). If I tried to just link the image from github using the URL: [https://github.com/schoolwidelabs/sensor-immersion/blob/master/docs/static/tutorials/co2.png](https://github.com/schoolwidelabs/sensor-immersion/blob/master/docs/static/tutorials/co2.png) the Content-Type returned from github was text/html instead of image/png when I looked at the http requests from the tutorial. Weird. Thanks for the help.

---

<div class="post-metadata">

### Author: ![peli](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/peli/32/12_2.png) [@peli](https://forum.makecode.com/u/peli)
#### Post date: [August 25, 2020, 6:40am UTC](https://forum.makecode.com/t/path-for-images-in-tutorial-on-github/3179/6 "2020-08-25T06:40:22Z")

</div>

We can probably do some magic when we render the tutorial to automatically patch the file paths. Could you file a bug in [https://github.com/microsoft/pxt-microbit](https://github.com/microsoft/pxt-microbit) ?
