Viewing local images when using Atom or Sublime Text and Marked

Alex's Avatar

Alex

05 Aug, 2016 12:50 AM

I write in Atom or Sublime Text, and render the markdown using Marked2.

The problem I'm having is with displaying images.

Here is an example:
I make an image link to a local image on my desk like this -> ![](file:///Users/alex/Desktop/IMG_1194.JPG) or I've tried ![](/Users/alex/Desktop/IMG_1194.JPG).

When I preview with Marked, however, I don't get an image. i just get a blue box with a question mark. If I right click that box, an say "Show in Preview" or "Reveal in Finder", it takes me to the image and displays (in Preview). So Marked has the right path. Why no image though in the preview?

Thanks.

  1. Support Staff 1 Posted by Brett on 06 Aug, 2016 08:26 PM

    Brett's Avatar

    I'm guessing it's a permissions issue. Are you using the App Store
    version? In that case you'd need to make sure that Marked had been
    granted permissions for the folder containing images. The easiest thing
    to do is just drop your home folder on the Marked icon and grant
    permissions when it asks. That will give access to everything in
    ~/alex/.

    If that's not the issue, you can try right clicking on a broken image,
    choosing Inspect Element, and seeing if there's any more useful info
    provided in the inspector.

    -Brett

  2. 2 Posted by Alexander Chame... on 06 Aug, 2016 09:41 PM

    Alexander Chamessian's Avatar

    Hi Brett,

    Thanks. That did the trick. Glad it was an easy fix.

    Is there any way to set relative links too? I read your article about doing that with nvALT. Can it be done with Marked if I’m writing in Atom?

    Of course, once BitWriter is out, I’ll do all my plain text there, and there won’t be a problem :)

    Thanks for all your help.

    -Alex

  3. Support Staff 3 Posted by Brett on 06 Aug, 2016 10:06 PM

    Brett's Avatar

    Relative links are relative to wherever the watched file is located.

    -Brett

  4. 4 Posted by brianthemacguru on 11 Aug, 2016 11:24 PM

    brianthemacguru's Avatar

    I'm getting the same issue with images not appearing (actually they blink then disappear and give the missing image icon)

    I tried dropping my home directory on Marked but the app crashes when I do that.

    I'm using the trial version, btw. Not MAS. Editing in Sublime Text 3.

  5. 5 Posted by brianthemacguru on 11 Aug, 2016 11:36 PM

    brianthemacguru's Avatar

    thought I could delete this duplicate... but nope!

  6. Support Staff 6 Posted by Brett on 13 Aug, 2016 08:00 PM

    Brett's Avatar

    @brianthemacguru this sounds like a separate issue. Right click on the broken image and "Inspect element". See what the path shown is, and let me know that vs. what you had in your document. It sounds like one of the javascripts that runs (likely related to image change tracking) is breaking the path.

  7. 7 Posted by brianthemacguru on 13 Aug, 2016 08:08 PM

    brianthemacguru's Avatar

    Inspected element

    <img
    src="file:///Users/master/Documents/Github/documentation/Getting%20Started/jim-hensons-dinosaurs.jpg?v=107508"
    alt="">

    HTML

    <figure>
    <img src="jim-hensons-dinosaurs.jpg" alt="" />
    </figure>

    From Sublime/Focused

    ![](jim-hensons-dinosaurs.jpg)

    It's weird because it blinks in for a half second then disappears.

  8. Support Staff 8 Posted by Brett on 13 Aug, 2016 08:14 PM

    Brett's Avatar

    If you open Terminal and run:

    open
    'file:///Users/master/Documents/Github/documentation/Getting%20Started/jim-hensons-dinosaurs.jpg'

    Does it open the file (probably in Preview) properly?

    -Brett

  9. 9 Posted by brianthemacguru on 13 Aug, 2016 08:25 PM

    brianthemacguru's Avatar

    nope.

    Maybe this helps

  10. Support Staff 10 Posted by Brett on 13 Aug, 2016 10:55 PM

    Brett's Avatar

    Can you inspect the image in the browser and see what path it's at? It
    looks like it's previewing from a tmp folder…

    -Brett

  11. 11 Posted by brianthemacguru on 13 Aug, 2016 10:58 PM

    brianthemacguru's Avatar


    On August 13, 2016 at 3:55:10 PM, Brett ([email blocked]) wrote:

    // Please reply above this line
    ==================================================
    From: Brett (Support staff)
    Subject: Viewing local images when using Atom or Sublime Text and Marked

    Can you inspect the image in the browser and see what path it's at? It
    looks like it's previewing from a tmp folder…

    -Brett



    View this discussion at our support site online: http://support.markedapp.com/discussions/problems/124762-viewing-local-images-when-using-atom-or-sublime-text-and-marked

    ---

    To unsubscribe and stop receiving emails from http://support.markedapp.com, visit http://support.markedapp.com/unsubscribe/df258a182bca0f89f2a75dcbfeb1442fca228f2a
  12. Support Staff 12 Posted by Brett on 13 Aug, 2016 11:00 PM

    Brett's Avatar

    Ok, so is the actual image in the same folder as the Markdown file?
    Because what Marked is showing does not include that last How do I
    install WordPress folder in the path.

    -Brett

  13. 13 Posted by brianthemacguru on 13 Aug, 2016 11:04 PM

    brianthemacguru's Avatar

    yes. the image is in the same directory (i sent the screenshot of the
    finder with all the others)

  14. Support Staff 14 Posted by Brett on 13 Aug, 2016 11:11 PM

    Brett's Avatar

    I'll have to look further into why it's choosing to truncate the end of that path, but I'm willing to bet it has a lot to do with the question mark in the folder name. Try removing that and viewing again, let me know if it makes a difference.

  15. 15 Posted by brianthemacguru on 13 Aug, 2016 11:14 PM

    brianthemacguru's Avatar

    THAT WAS TOTALLY IT!

  16. Support Staff 16 Posted by Brett on 13 Aug, 2016 11:19 PM

    Brett's Avatar

    For reference, a question mark is a reserved unix character (like the
    asterisk) that isn't _technically_ valid in file paths. The HFS
    filesystem on the Mac allows it, and in general it doesn't cause issues.
    I'll need to check the code to see where Marked is taking it upon itself
    to break that, but it might be worth averting some future software
    issues by avoiding those reserved characters in folder and file names.
    This is absolutely Marked's fault though, thanks for pointing it out.

    -Brett

  17. 17 Posted by brianthemacguru on 13 Aug, 2016 11:22 PM

    brianthemacguru's Avatar

    Sweet. I do software support, too. For Realmacsoftware, so I totally
    understand how user issues help improve software.

    Enjoy the rest of your weekend, Brett.

    Cheers
    Brian

  18. Support Staff 18 Posted by Brett on 13 Aug, 2016 11:31 PM

    Brett's Avatar

    Nice, I love Realmac :).

  19. 19 Posted by Henman on 23 Feb, 2019 08:28 PM

    Henman's Avatar

    This is an old discussion but for people having similar issues on OS X (like me) I just want to add that this issue does not seem to be fixed as of yet (version 2.5.30). Having # in a folder name is equally bad and will break the ability of Marked 2 to properly determine the base folder, and therefore all relative path links to files will be off.

    Took me hours to troubleshoot because it's not an obvious error (to me), is specific to folder names (not file names) and only while loading the base file (afaik). I haven't seen something similar in other programs before, which makes it even harder to diagnose.

    For example:
    If the md file that is previewed is in a path like:

    somefolder/somefolder2/#somefolder/

    the file will be loaded without issues but its base path will erroneously be set to:

    somefolder/somefolder2/

    Any relative file paths for images etc. within the md file will now be off.
    So an image file in

    somefolder/somefolder2/#somefolder/imagefolder/

    that is referenced as

    will not be found by Marked because it's looking in

    /somefolder/somefolder2/imagefolder instead.

    HOWEVER, there is an interesting "solution", one has to set the relative path as
    because when processing Markdown, it seems like Marked doesn't have an issue with the # in the folder name (also FYI, Marked is fine with # in file names).

    (Of course the "solution" I present should not be used because it will mess up relative file paths for all other programs. It's also not best practice to have # or similar reserved characters in folder or file names, but it's tolerated by OS X)

    I like Marked a lot, I hope that gets fixed at some point, or alternatively it might be helpful to mention this somewhere in the FAQs.

  20. Support Staff 20 Posted by Brett on 23 Feb, 2019 11:23 PM

    Brett's Avatar

    The base path is an html attribute in this case. A hash in an html value
    indicates a page position and is ignored in paths. Using a hash in a
    path name on any filesystem is highly inadvisable. My recommendation is
    to never use a hash in a filename if one can avoid it…

    -Brett

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac