tag:support.markedapp.com,2011-09-11:/discussions/problems/148152-relative-paths-in-image-links-and-pandocMarked: Discussion 2022-01-05T15:57:44Ztag:support.markedapp.com,2011-09-11:Comment/456797622018-07-12T17:32:40Z2018-07-12T17:32:40ZRelative paths in image links and Pandoc<div><p>Hi Brett,<br>
thanks for the release 2.5.19 which solved the issue of colons inside headings id.<br>
This time I'm writing because I'm facing problems with image links in markdown docs to be processed by Pandoc.</p>
<p>Let's say I have a MD file with a link to an image saved in Resources folder so the hierarchy is something like:</p>
<pre>
<code>BaseFolder
MyFile.md
…
ResourcesFolder
MyImage.jpg</code>
</pre>
<p>In Advanced preferences I specified the following Pandoc argument (among the others):</p>
<pre>
<code>--resource-path=/Volumes/myUSBdisk/path/to/BaseFolder/ResourcesFolder/</code>
</pre>
<p>so that Pandoc can locate the image if I use a relative path in a link:</p>
<pre>
<code>![A nice image](MyImage.jpg)</code>
</pre>
<p>If I use Pandoc on the command line to process the file everything works fine but unfortunately if I open the file in Marked 2 I see the missing image placeholder and the html created by Marked 2 is:</p>
<pre>
<code class="html"><figure>
<img src="MyImage.jpg" alt="A nice image" /><figcaption>A nice image</figcaption>
</figure></code>
</pre>
<p>which shows why the image cannot be located.</p>
<p>Also notice that Marked 2 correctly shows the image if I use the link</p>
<pre>
<code>![A nice image](./ResourcesFolder/MyImage.jpg)</code>
</pre>
<p>even if this syntax doesn't work in Pandoc (because the base for relative links is the working directory and not the directory containing the MD file).</p>
<p>Given the behaviour I described I suspect that Marked 2 is somehow pre-processing images paths before handing down the ball to Pandoc. Is this the case?</p>
<p>Thanks,<br>
Pierpaolo</p></div>johsebtag:support.markedapp.com,2011-09-11:Comment/456797622018-07-13T16:03:45Z2018-07-13T16:03:45ZRelative paths in image links and Pandoc<div><p>Marked does do some processing on image paths, both before and after the<br>
main processor runs. If a path is relative, it tries to flesh out the<br>
path based on document location or a Base: metadata tag. This is<br>
primarily because it needs to find the images to watch them for changes,<br>
but also to accommodate a few inconsistencies in the way that different<br>
processors handle things like spaces in paths.</p>
<p>However, if the output you're showing is what it's leaving, I'm not<br>
certain that it's making the change. If you open Help->Custom Processor<br>
Log, do the image paths being output by Pandoc directly differ from<br>
what's showing up in the preview?</p>
<p>Using the metadata base: might help, and not require you to change the<br>
document itself...</p>
<p>Base: /Volumes/myUSBdisk/path/to/BaseFolder/ResourcesFolder/</p>
<p>Let me know if your processor log differs from the output. You can also<br>
right click and inspect the broken image to see the path that the<br>
preview itself is using, which may differ from the source or export<br>
output.</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/456797622018-07-13T20:04:23Z2018-07-13T20:04:23ZRelative paths in image links and Pandoc<div><p>Hi Brett,<br>
thanks for your reply.</p>
<p>I made a few additional tests and I think I can say it's an issue with Pandoc and not Marked 2.</p>
<p>In my configs there was a difference between Terminal Pandoc command and Marked 2 preview with Pandoc as processor: Pandoc command had a <code>--self-contained</code> option that was missing in Marked 2 processor args.<br>
Once I added the <code>--self-contained</code> option to Marked 2 processor args the preview showed the image correctly.</p>
<p>So if you don't use the <code>--self-contained</code> option Pandoc seems to succeed in locating the image making use of the <code>--resource-path</code> option (Pandoc is not complaining about not finding the image as it does if you remove the <code>--resource-path</code> option) but it doesn't write the HTML <code><img></code> correctly and generate the wrong HTML:</p>
<pre>
<code><figure>
<img src="MyImage.jpg" alt="A nice image" /><figcaption>A nice image</figcaption>
</figure></code>
</pre>
<p>which I thought was generated by Marked 2.</p>
<p>If you use the <code>--self-contained</code> option Pandoc locates the image and correctly add the base64 encoded portion.</p>
<p>I must investigate the issue but I didn't find anything relevant on the Internet so I wonder if you, or any other Pandoc user reading this, are seeing the same behaviour.</p>
<p>Of course there's always the possibility to specify the full path for the image source but that's what I was trying to avoid.</p></div>johsebtag:support.markedapp.com,2011-09-11:Comment/456797622018-07-13T20:11:49Z2018-07-13T20:11:49ZRelative paths in image links and Pandoc<div><p>Yes, avoiding writing full, absolute paths is a fair objective :).</p>
<p>Unfortunately, I'm not an in-depth enough user of Pandoc to have dealt<br>
much with these particular settings. Might be worth googling for a more<br>
active group, as people who've already solved an issue or know the<br>
solution aren't typically reading the support tickets for them here...</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/456797622021-08-05T06:43:02Z2021-08-05T06:43:03ZRelative paths in image links and Pandoc<div><p>For anyone that happens along and wants to use "--resource-path=..." you'll have to use it combined with either of these flags:</p>
<p>--self-contained</p>
<p>or</p>
<p>--extract-media=...</p></div>Davidtag:support.markedapp.com,2011-09-11:Comment/456797622022-01-05T15:57:39Z2022-01-05T15:57:41ZRelative paths in image links and Pandoc<div><p>@David thanks for the heads up; that solved my issue perfectly</p></div>matt