Search code examples
htmlgithubhyperlinkmarkdownmkdocs

Links work in MkDocs but not on GitHub repo

I am trying to put an image on my MkDocs webpage like this:

<div align="center">
 <img src=/../../images/img1.PNG>
 <img src=/../../images/img2.PNG>
 <figcaption>Fig1 (left), Fig2 (right)!</figcaption>
</div>

Which works fine. However, when I upload this to GitHub, the images don't show up. Is there a way to change the links so that they work on GitHub and MkDocs webpage? Thanks!

Solution

  • I fixed the problem by doing this:

    ![](../../images/img1.PNG#smallimg) ![](../../images/img2.PNG#smallimg)

_Fig1 (left), Fig2 (right)!_

    And then adding a style tag at the bottom of the page:

    <style>
img[src*="#bigimg"] {
   width:100%;
}
img[src*="#smallimg"]{
    width:45%;
}
</style>