CINXE.COM
Markdown syntax image PATH readable by both editor & Hugo - support - HUGO
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Markdown syntax image PATH readable by both editor & Hugo - support - HUGO</title> <meta name="description" content="Hi there. I’m working on my first Hugo site. I have an image in /{site URL}/static/images/ and I can get it to work in my local preview (hugo server -D) if I use that URL in my Markdown. Here’s the thing, though. I am &hellip;"> <meta name="generator" content="Discourse 3.4.0.beta3-dev - https://github.com/discourse/discourse version 5bf5d1335680f28a8eb65c488353be9585eed08e"> <link rel="icon" type="image/png" href="https://global.discourse-cdn.com/flex036/uploads/gohugo/optimized/2X/6/66a05218f64425b2fa59ede30c1b4b7dc1fdf5f9_2_32x32.ico"> <link rel="apple-touch-icon" type="image/png" href="https://global.discourse-cdn.com/flex036/uploads/gohugo/optimized/2X/c/c2d3414c64e766d814100b32063948e604298a70_2_180x180.png"> <meta name="theme-color" media="all" content="#0a1922"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes, viewport-fit=cover"> <link rel="canonical" href="https://discourse.gohugo.io/t/markdown-syntax-image-path-readable-by-both-editor-hugo/21980" /> <link rel="search" type="application/opensearchdescription+xml" href="https://discourse.gohugo.io/opensearch.xml" title="HUGO Search"> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/color_definitions_hugo-light_1_3_09733212c5bcbf3d2262e9135364889a94410a8e.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" class="light-scheme"/> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/desktop_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="desktop" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/checklist_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="checklist" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-adplugin_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-adplugin" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-ai_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-ai" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-akismet_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-akismet" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-cakeday_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-cakeday" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-details_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-details" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-lazy-videos_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-lazy-videos" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-local-dates_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-local-dates" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-narrative-bot_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-narrative-bot" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-presence_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-presence" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-solved_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-solved" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/footnote_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="footnote" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/hosted-site_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="hosted-site" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/poll_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="poll" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/spoiler-alert_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="spoiler-alert" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/discourse-ai_desktop_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="discourse-ai_desktop" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/poll_desktop_d02c2ac443d5119470bb87ccc1761df2dc8dc4ce.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="poll_desktop" /> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/desktop_theme_2_554e2f649b5332218939d027878568e9fb5cb3e9.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="2" data-theme-name="custom header links"/> <link href="https://yyz2.discourse-cdn.com/flex036/stylesheets/desktop_theme_3_ba320989966c049743dec43ab8cc84324bf2a254.css?__ws=discourse.gohugo.io" media="all" rel="stylesheet" data-target="desktop_theme" data-theme-id="3" data-theme-name="hugo light"/> <meta id="data-ga-universal-analytics" data-tracking-code="UA-7131036-7" data-json="{"cookieDomain":"auto"}" data-auto-link-domains=""> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-7131036-7" nonce="wdFpGyhGTCjqQA79LloJQFeiu"></script> <script defer src="https://global.discourse-cdn.com/flex036/assets/google-universal-analytics-v4-e154af4adb3c483a3aba7f9a7229b8881cdc5cf369290923d965a2ad30163ae8.gz.js" data-discourse-entrypoint="google-universal-analytics-v4" nonce="wdFpGyhGTCjqQA79LloJQFeiu"></script> <link rel="alternate nofollow" type="application/rss+xml" title="RSS feed of 'Markdown syntax image PATH readable by both editor & Hugo'" href="https://discourse.gohugo.io/t/markdown-syntax-image-path-readable-by-both-editor-hugo/21980.rss" /> <meta property="og:site_name" content="HUGO" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:image" content="https://global.discourse-cdn.com/flex036/uploads/gohugo/original/2X/b/b91c8ab3a3c1c8679127cf049b46fa919e9e0e5c.png" /> <meta property="og:image" content="https://global.discourse-cdn.com/flex036/uploads/gohugo/original/2X/b/b91c8ab3a3c1c8679127cf049b46fa919e9e0e5c.png" /> <meta property="og:url" content="https://discourse.gohugo.io/t/markdown-syntax-image-path-readable-by-both-editor-hugo/21980" /> <meta name="twitter:url" content="https://discourse.gohugo.io/t/markdown-syntax-image-path-readable-by-both-editor-hugo/21980" /> <meta property="og:title" content="Markdown syntax image PATH readable by both editor & Hugo" /> <meta name="twitter:title" content="Markdown syntax image PATH readable by both editor & Hugo" /> <meta property="og:description" content="Hi there. I’m working on my first Hugo site. I have an image in /{site URL}/static/images/ and I can get it to work in my local preview (hugo server -D) if I use that URL in my Markdown. Here’s the thing, though. I am using an editor that gives a preview, and it would be super nice to use that editor’s features. What I want to do is: Drag and drop the image into the editor (which works) Look at the image in the editor (which works) Save, and have Hugo parse the path in the Markdown, which th..." /> <meta name="twitter:description" content="Hi there. I’m working on my first Hugo site. I have an image in /{site URL}/static/images/ and I can get it to work in my local preview (hugo server -D) if I use that URL in my Markdown. Here’s the thing, though. I am using an editor that gives a preview, and it would be super nice to use that editor’s features. What I want to do is: Drag and drop the image into the editor (which works) Look at the image in the editor (which works) Save, and have Hugo parse the path in the Markdown, which th..." /> <meta property="og:article:section" content="support" /> <meta property="og:article:section:color" content="652D90" /> <meta name="twitter:label1" value="Reading time" /> <meta name="twitter:data1" value="1 mins 🕑" /> <meta name="twitter:label2" value="Likes" /> <meta name="twitter:data2" value="1 ❤" /> <meta property="article:published_time" content="2019-11-26T05:24:11+00:00" /> <meta property="og:ignore_canonical" content="true" /> <script type="application/ld+json">{"@context":"http://schema.org","@type":"QAPage","name":"Markdown syntax image PATH readable by both editor & Hugo","mainEntity":{"@type":"Question","name":"Markdown syntax image PATH readable by both editor & Hugo","text":"Hi there. I’m working on my first Hugo site.\n\nI have an image in /{site URL}/static/images/ and I can get it to work in my local preview (hugo server -D) if I use that URL in my Markdown.\n\nHere’s the thing, though. I am using an editor that gives a preview, and it would be super nice to use that edi…","upvoteCount":0,"answerCount":0,"datePublished":"2019-11-26T05:24:11.364Z","author":{"@type":"Person","name":"pconrad-fb","url":"https://discourse.gohugo.io/u/pconrad-fb"}}}</script> </head> <body class="crawler browser-update"> <script defer="" src="https://yyz2.discourse-cdn.com/flex036/theme-javascripts/417061e7eee24be4fb6a457975f0dce96a82d9e6.js?__ws=discourse.gohugo.io" data-theme-id="5" nonce="wdFpGyhGTCjqQA79LloJQFeiu"></script> <header> <a href="/"> HUGO </a> </header> <div id="main-outlet" class="wrap" role="main"> <div id="topic-title"> <h1> <a href="/t/markdown-syntax-image-path-readable-by-both-editor-hugo/21980">Markdown syntax image PATH readable by both editor & Hugo</a> </h1> <div class="topic-category" itemscope itemtype="http://schema.org/BreadcrumbList"> <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"> <a href="/c/support/34" class="badge-wrapper bullet" itemprop="item"> <span class='badge-category-bg' style='background-color: #652D90'></span> <span class='badge-category clear-badge'> <span class='category-name' itemprop='name'>support</span> </span> </a> <meta itemprop="position" content="1" /> </span> </div> </div> <div itemscope itemtype='http://schema.org/DiscussionForumPosting'> <meta itemprop='headline' content='Markdown syntax image PATH readable by both editor & Hugo'> <link itemprop='url' href='https://discourse.gohugo.io/t/markdown-syntax-image-path-readable-by-both-editor-hugo/21980'> <meta itemprop='datePublished' content='2019-11-26T05:24:11Z'> <meta itemprop='articleSection' content='support'> <meta itemprop='keywords' content=''> <div itemprop='publisher' itemscope itemtype="http://schema.org/Organization"> <meta itemprop='name' content='HUGO'> </div> <div id='post_1' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discourse.gohugo.io/u/pconrad-fb'><span itemprop='name'>pconrad-fb</span></a> </span> <link itemprop="mainEntityOfPage" href="https://discourse.gohugo.io/t/markdown-syntax-image-path-readable-by-both-editor-hugo/21980"> <span class="crawler-post-infos"> <time datetime='2019-11-26T05:24:11Z' class='post-time'> November 26, 2019, 5:24am </time> <meta itemprop='dateModified' content='2019-11-26T07:16:53Z'> <span itemprop='position'>1</span> </span> </div> <div class='post' itemprop='text'> <p>Hi there. I’m working on my first Hugo site.</p> <p>I have an image in /{site URL}/static/images/ and I can get it to work in my local preview (<code>hugo server -D</code>) if I use that URL in my Markdown.</p> <p>Here’s the thing, though. I am using an editor that gives a preview, and it would be super nice to use that editor’s features. What I want to do is:</p> <ol> <li>Drag and drop the image into the editor (which works)</li> <li>Look at the image in the editor (which works)</li> <li>Save, and have Hugo parse the path in the Markdown, which the editor understands (doesn’t work)</li> <li>Maybe even have Hugo figure out what happens to the images in the <code>static</code> directory, since I don’t care.</li> </ol> <p>I mean… the whole point of a site generator is that I don’t need to worry about where images are stored. Right?</p> <p>Unfortunately, if I want to add images to a page using my editor of choice, I have to use a path that Hugo understands but makes no sense to the editor. So I can’t edit a document and see the images at the same time.</p> <p>Why can’t I provide a full path to the image on disk (so my editor can see it) and have Hugo go get it from there (for local preview) and copy it into the static directory (for deployment)?</p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="0" /> <span class='post-likes'></span> </div> <div class='crawler-linkback-list' itemscope itemtype='http://schema.org/ItemList'> <div itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <a itemprop='url' href="https://discourse.gohugo.io/t/image-path/1721/15">Image path</a> <meta itemprop='position' content='1'> </div> </div> </div> <div id='post_2' itemprop='comment' itemscope itemtype='http://schema.org/Comment' class='topic-body crawler-post'> <div class='crawler-post-meta'> <span class="creator" itemprop="author" itemscope itemtype="http://schema.org/Person"> <a itemprop="url" href='https://discourse.gohugo.io/u/alexandros'><span itemprop='name'>alexandros</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2019-11-27T12:29:40Z' class='post-time'> November 27, 2019, 12:29pm </time> <meta itemprop='dateModified' content='2019-11-27T12:29:40Z'> <span itemprop='position'>2</span> </span> </div> <div class='post' itemprop='text'> <p>You may want to track <a href="https://github.com/gohugoio/hugo/issues/6545">https://github.com/gohugoio/hugo/issues/6545</a></p> </div> <div itemprop="interactionStatistic" itemscope itemtype="http://schema.org/InteractionCounter"> <meta itemprop="interactionType" content="http://schema.org/LikeAction"/> <meta itemprop="userInteractionCount" content="1" /> <span class='post-likes'>1 Like</span> </div> </div> </div> <div id="related-topics" class="more-topics__list " role="complementary" aria-labelledby="related-topics-title"> <h3 id="related-topics-title" class="more-topics__list-title"> Related topics </h3> <div class="topic-list-container" itemscope itemtype='http://schema.org/ItemList'> <meta itemprop='itemListOrder' content='http://schema.org/ItemListOrderDescending'> <table class='topic-list'> <thead> <tr> <th>Topic</th> <th></th> <th class="replies">Replies</th> <th class="views">Views</th> <th>Activity</th> </tr> </thead> <tbody> <tr class="topic-list-item" id="topic-list-item-21990"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='1'> <span class="link-top-line"> <a itemprop='url' href='https://discourse.gohugo.io/t/path-to-images/21990' class='title raw-link raw-topic-link'>Path to images</a> </span> <div class="link-bottom-line"> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>2</span> </td> <td class="views"> <span class='views' title='views'>433</span> </td> <td> November 26, 2019 </td> </tr> <tr class="topic-list-item" id="topic-list-item-1721"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='2'> <span class="link-top-line"> <a itemprop='url' href='https://discourse.gohugo.io/t/image-path/1721' class='title raw-link raw-topic-link'>Image path</a> </span> <div class="link-bottom-line"> <a href='/c/support/34' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #652D90'></span> <span class='badge-category clear-badge'> <span class='category-name'>support</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>14</span> </td> <td class="views"> <span class='views' title='views'>60520</span> </td> <td> November 26, 2019 </td> </tr> <tr class="topic-list-item" id="topic-list-item-49348"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='3'> <span class="link-top-line"> <a itemprop='url' href='https://discourse.gohugo.io/t/image-relative-url-at-markdown-format/49348' class='title raw-link raw-topic-link'>Image relative url at markdown format</a> </span> <div class="link-bottom-line"> <a href='/c/support/34' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #652D90'></span> <span class='badge-category clear-badge'> <span class='category-name'>support</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>3</span> </td> <td class="views"> <span class='views' title='views'>210</span> </td> <td> April 18, 2024 </td> </tr> <tr class="topic-list-item" id="topic-list-item-52487"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='4'> <span class="link-top-line"> <a itemprop='url' href='https://discourse.gohugo.io/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487' class='title raw-link raw-topic-link'>Markdown-style images with full path when baseurl includes subdirectory</a> </span> <div class="link-bottom-line"> <a href='/c/support/34' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #652D90'></span> <span class='badge-category clear-badge'> <span class='category-name'>support</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>3</span> </td> <td class="views"> <span class='views' title='views'>36</span> </td> <td> November 24, 2024 </td> </tr> <tr class="topic-list-item" id="topic-list-item-29403"> <td class="main-link" itemprop='itemListElement' itemscope itemtype='http://schema.org/ListItem'> <meta itemprop='position' content='5'> <span class="link-top-line"> <a itemprop='url' href='https://discourse.gohugo.io/t/relative-path-for-markdown-editor-preview/29403' class='title raw-link raw-topic-link'>Relative path for markdown editor preview</a> </span> <div class="link-bottom-line"> <a href='/c/support/34' class='badge-wrapper bullet'> <span class='badge-category-bg' style='background-color: #652D90'></span> <span class='badge-category clear-badge'> <span class='category-name'>support</span> </span> </a> <div class="discourse-tags"> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>4</span> </td> <td class="views"> <span class='views' title='views'>1100</span> </td> <td> November 18, 2020 </td> </tr> </tbody> </table> </div> </div> </div> <footer class="container wrap"> <nav class='crawler-nav'> <ul> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/' itemprop="url">Home </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/categories' itemprop="url">Categories </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/guidelines' itemprop="url">Guidelines </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/tos' itemprop="url">Terms of Service </a> </span> </li> <li itemscope itemtype='http://schema.org/SiteNavigationElement'> <span itemprop='name'> <a href='/privacy' itemprop="url">Privacy Policy </a> </span> </li> </ul> </nav> <p class='powered-by-link'>Powered by <a href="https://www.discourse.org">Discourse</a>, best viewed with JavaScript enabled</p> </footer> <div class="buorg"><div>Unfortunately, <a href="https://www.discourse.org/faq/#browser">your browser is unsupported</a>. Please <a href="https://browsehappy.com">switch to a supported browser</a> to view rich content, log in and reply.</div></div> </body> </html>