0

Background

I'm working on a Python project and I'm using PyCharm as the IDE (pro version). It enables integrated use of Markdown, and I'm writing a readme.md file as well (github compatible, not sure about the exact flavour of Markdown but I reference this link https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet).

I wanted to embed an image and this works perfectly fine using Markdown. I can refer to the image using standard path syntax (e.g. if it's in the same working directory I just write):

![Alternative image text](my_image.png)

Putting the image in another folder also works fine:

![Alternative image text](../imgs/my_image.png)

The question

The problem happens when I want to resize the image. If I understood correctly from this question, it is not possible to do this in plain Markdown, but HTML needs to be used: Changing image size in Markdown

This creates another problem. I cannot refer to the image except by using the full file-path!

I've created several copies of the image and put it in different folders to try and see whether anything of the following will work):

<img src="my_image.png" width="120" height="120">
<img src="../imgs/my_image.png" width="120" height="120">
<img src="./imgs/my_image.png" width="120" height="120">
<img src="./my_image.png" width="120" height="120">

The only option that works is writing the full path of the image, so:

<img src="/home/myUserName/MyProjects/ProjectName/imgs/etf_logo.png" width="120" height="120">

All other Stack overflow questions regarding HTML and relative imports are of no use to me since they are all addressing websites (which is logical) and refer to relative page paths, not folder paths.

e.g. Relative path in HTML

How to set relative path to current folder?

Disclaimer: I'm not experienced in HTML and I don't "need" it for my project. I just wanted to resize the image without having to do this manually through image editing software.

waykiki
  • 914
  • 2
  • 9
  • 19
  • 1
    Normally, the same relative path would work the same in HTML as it would in Markdown. It is it behaving differently for you, then presumably your IDE is don't something non-standard behind the scenes when converting your Markdown to HTML. Of course, the raw HTL is left unmodified in that case so it fails. Try using the Markdown link and then viewing the source HTML (if you have that option) of the rendered Markdown to see what form the URL takes. Then copy that form to the raw HTML. – Waylan Sep 28 '21 at 17:17
  • 1
    I've never used PyCharm myself, so I don't know for sure, but it occurs to me that it could be writing the rendered HTML to a temp file in a temp dir somewhere. Obviously, that temp location is not relative to the image in the same manner as the original Markdown document. Therefore, the renderer would need to resolve the relative URL to a absolute URL and then use that absolute URL in HTML output. Of course, as raw HTML would not get this processing, then it would require you to use the absolute UTRL. – Waylan Sep 28 '21 at 17:26
  • Thanks @Waylan, you've figured out what's wrong. I just uploaded the code to github and the image appears normally on the site! It is just within the IDE that the image does not render. So the answer is: the code/syntax was valid, but PyCharm simply changes the file path internally. I will try and find how/what it does and post it as an answer if I figure it out. But if anyone ever encounters this problem -> the markdown file should be fine, it is just PyCharm. – waykiki Sep 28 '21 at 20:09

0 Answers0