Problem: I paste image into Typora Markdown editor. Typora creates a link to that image that the markdown file can navigate to locally. However, in production navigation flows one level differently. Hugo complies content into a public folder with one less parent directory.
Pasting into Typora creates this:
Locally you will see the image in Typora, but on production/dev you will see a bad link. By removing the
.. from the link reference url image fails in Typora, but succeeds in Dev/Production.
Use Typora YAML
Typora has a built in, image tool that lets you use a different local root reference for images. See
typora-root-url: ../. Unfortunately, my site is built with TOML. And, Typora does not support TOML yet. I’m going to stick with TOML for now, rather than rewrite the whole website in YAML. I find TOML cleaner to read than YAML.
###Just do it live!
I can just remove the
.. when I’m ready to deploy the post. Though, when I look at it in my markdown editor,
Typora, it will show a broken link. There’s got to be a better way.
###Add twice and ignore!
I’ve decided upon adding the file twice- the interaction doesn’t take much attention to do. When pasting an image into
Typora the image will be saved to
content/blog/images. That folder will be ignored in
.gitignore. And the second copy will reside in
/content/images. This will let me see image references locally on Typora and in production. Not pretty, but neither is this blog.