CINXE.COM
How to properly link images in blog posts? - support - HUGO
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>How to properly link images in blog posts? - support - HUGO</title> <meta name="description" content="Hey folks. Working on getting a Hugo blog up and running, but struggling to wrap my head around the best way to link to images in each post. Currently, I have my posts organized in page bundles, which I understand to be&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/how-to-properly-link-images-in-blog-posts/52537" /> <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="rolf05sA6gsRu4LmmWpdhF2fl"></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="rolf05sA6gsRu4LmmWpdhF2fl"></script> <link rel="alternate nofollow" type="application/rss+xml" title="RSS feed of 'How to properly link images in blog posts?'" href="https://discourse.gohugo.io/t/how-to-properly-link-images-in-blog-posts/52537.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/how-to-properly-link-images-in-blog-posts/52537" /> <meta name="twitter:url" content="https://discourse.gohugo.io/t/how-to-properly-link-images-in-blog-posts/52537" /> <meta property="og:title" content="How to properly link images in blog posts?" /> <meta name="twitter:title" content="How to properly link images in blog posts?" /> <meta property="og:description" content="Hey folks. Working on getting a Hugo blog up and running, but struggling to wrap my head around the best way to link to images in each post. Currently, I have my posts organized in page bundles, which I understand to be best practice. So the structure looks like this: └── content/ └── posts/ └── hello-world/ ├── hello-world.md └── javier.jpg however, when I try to include an image in the body of my markdown file: ![alt](javier.jpg) the link is broken, bot..." /> <meta name="twitter:description" content="Hey folks. Working on getting a Hugo blog up and running, but struggling to wrap my head around the best way to link to images in each post. Currently, I have my posts organized in page bundles, which I understand to be best practice. So the structure looks like this: └── content/ └── posts/ └── hello-world/ ├── hello-world.md └── javier.jpg however, when I try to include an image in the body of my markdown file: ![alt](javier.jpg) the link is broken, bot..." /> <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="2024-11-27T02:54:51+00:00" /> <meta property="og:ignore_canonical" content="true" /> <script type="application/ld+json">{"@context":"http://schema.org","@type":"QAPage","name":"How to properly link images in blog posts?","mainEntity":{"@type":"Question","name":"How to properly link images in blog posts?","text":"Hey folks. Working on getting a Hugo blog up and running, but struggling to wrap my head around the best way to link to images in each post.\n\nCurrently, I have my posts organized in page bundles, which I understand to be best practice. So the structure looks like this:\n\n└── content/\n\n└── posts/\n\n…","upvoteCount":0,"answerCount":1,"datePublished":"2024-11-27T02:54:51.879Z","author":{"@type":"Person","name":"maaaaaaaaaatt","url":"https://discourse.gohugo.io/u/maaaaaaaaaatt"},"acceptedAnswer":{"@type":"Answer","text":"[image] maaaaaaaaaatt:\n\n── content/\n\n└── posts/\n\n└── hello-world/\n\n├── hello-world.md\n\n└── javier.jpg\n\nRename hello-world.md to index.md, then read this:\n\n<a href=\"https://discourse.gohugo.io/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487/2\">https://discourse.gohugo.io/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487/…<\/a>","upvoteCount":1,"datePublished":"2024-11-27T03:34:03.676Z","url":"https://discourse.gohugo.io/t/how-to-properly-link-images-in-blog-posts/52537/2","author":{"@type":"Person","name":"jmooring","url":"https://discourse.gohugo.io/u/jmooring"}}}}</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="rolf05sA6gsRu4LmmWpdhF2fl"></script> <header> <a href="/"> HUGO </a> </header> <div id="main-outlet" class="wrap" role="main"> <div id="topic-title"> <h1> <a href="/t/how-to-properly-link-images-in-blog-posts/52537">How to properly link images in blog posts?</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='How to properly link images in blog posts?'> <link itemprop='url' href='https://discourse.gohugo.io/t/how-to-properly-link-images-in-blog-posts/52537'> <meta itemprop='datePublished' content='2024-11-27T02:54:51Z'> <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/maaaaaaaaaatt'><span itemprop='name'>maaaaaaaaaatt</span></a> </span> <link itemprop="mainEntityOfPage" href="https://discourse.gohugo.io/t/how-to-properly-link-images-in-blog-posts/52537"> <span class="crawler-post-infos"> <time datetime='2024-11-27T02:54:51Z' class='post-time'> November 27, 2024, 2:54am </time> <meta itemprop='dateModified' content='2024-11-27T02:54:51Z'> <span itemprop='position'>1</span> </span> </div> <div class='post' itemprop='text'> <p>Hey folks. Working on getting a Hugo blog up and running, but struggling to wrap my head around the best way to link to images in each post.</p> <p>Currently, I have my posts organized in page bundles, which I understand to be best practice. So the structure looks like this:</p> <pre><code class="lang-auto">└── content/ └── posts/ └── hello-world/ ├── hello-world.md └── javier.jpg </code></pre> <p>however, when I try to include an image in the body of my markdown file:</p> <pre><code class="lang-auto">![alt](javier.jpg) </code></pre> <p>the link is broken, both locally and after I push to github pages. In doing testing, I’ve managed to get it to work by jumping up a folder in my link:</p> <pre><code class="lang-auto">![alt](../javier.jpg) </code></pre> <p>but that’s 1. messy, and 2. doesn’t work on my homepage, when that relative link is no longer the same.</p> <p>I think I’m missing an understanding of my structure that’s causing this link to be broken. Any help? What’s the simplest way to include an image in my blogposts??</p> <p>Repo is <a href="https://github.com/maaaaaaaaaatt/oscardelahoya" rel="noopener nofollow ugc">here</a>, for reference.</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> <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/jmooring'><span itemprop='name'>jmooring</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-11-27T03:34:03Z' class='post-time'> November 27, 2024, 3:34am </time> <meta itemprop='dateModified' content='2024-11-27T03:34:03Z'> <span itemprop='position'>2</span> </span> </div> <div class='post' itemprop='text'> <aside class="quote no-group" data-username="maaaaaaaaaatt" data-post="1" data-topic="52537"> <div class="title"> <div class="quote-controls"></div> <img loading="lazy" alt="" width="24" height="24" src="https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/maaaaaaaaaatt/48/21470_2.png" class="avatar"> maaaaaaaaaatt:</div> <blockquote> <pre><code class="lang-auto">── content/ └── posts/ └── hello-world/ ├── hello-world.md └── javier.jpg </code></pre> </blockquote> </aside> <p>Rename hello-world.md to index.md, then read this:<br> <a href="https://discourse.gohugo.io/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487/2">https://discourse.gohugo.io/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487/2</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 id='post_3' 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/maaaaaaaaaatt'><span itemprop='name'>maaaaaaaaaatt</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-11-27T03:38:14Z' class='post-time'> November 27, 2024, 3:38am </time> <meta itemprop='dateModified' content='2024-11-27T03:38:14Z'> <span itemprop='position'>3</span> </span> </div> <div class='post' itemprop='text'> <p>many thanks, per usual <a class="mention" href="/u/jmooring">@jmooring</a> !</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> <div id='post_4' 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/maaaaaaaaaatt'><span itemprop='name'>maaaaaaaaaatt</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-11-27T03:49:18Z' class='post-time'> November 27, 2024, 3:49am </time> <meta itemprop='dateModified' content='2024-11-27T03:49:18Z'> <span itemprop='position'>4</span> </span> </div> <div class='post' itemprop='text'> <p>also, looking like for images that I would want to remain linked when pulled through a Summary on my homepage (like <a href="https://oscardelahoya.net/" rel="noopener nofollow ugc">here</a>), I’d want to link it as a global resource, yeah?</p> <p>Is there a good way to not include any images in my content section when it’s pulled into the shorter summary on my homepage?</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> <div id='post_5' 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/jmooring'><span itemprop='name'>jmooring</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-11-27T03:51:14Z' class='post-time'> November 27, 2024, 3:51am </time> <meta itemprop='dateModified' content='2024-11-27T03:51:14Z'> <span itemprop='position'>5</span> </span> </div> <div class='post' itemprop='text'> <aside class="quote no-group" data-username="maaaaaaaaaatt" data-post="4" data-topic="52537"> <div class="title"> <div class="quote-controls"></div> <img loading="lazy" alt="" width="24" height="24" src="https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/maaaaaaaaaatt/48/21470_2.png" class="avatar"> maaaaaaaaaatt:</div> <blockquote> <p>want to remain linked when pulled through a Summary</p> </blockquote> </aside> <p>Did you enable the embedded image and link render hooks as described in the linked topic?</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> <div id='post_6' 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/maaaaaaaaaatt'><span itemprop='name'>maaaaaaaaaatt</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-11-27T03:52:41Z' class='post-time'> November 27, 2024, 3:52am </time> <meta itemprop='dateModified' content='2024-11-27T03:52:41Z'> <span itemprop='position'>6</span> </span> </div> <div class='post' itemprop='text'> <p>I did, placed the following into my hugo.toml config file:</p> <pre><code class="lang-auto">[markup.goldmark.renderHooks.image] enableDefault = true [markup.goldmark.renderHooks.link] enableDefault = true </code></pre> </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> <div id='post_7' 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/jmooring'><span itemprop='name'>jmooring</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-11-27T03:55:27Z' class='post-time'> November 27, 2024, 3:55am </time> <meta itemprop='dateModified' content='2024-11-27T03:55:27Z'> <span itemprop='position'>7</span> </span> </div> <div class='post' itemprop='text'> <p>Well, as long as you or your theme has not overridden the embedded render hooks, image destinations will be correctly resolved regardless of where the content (or summary portion of the content) is displayed.</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> <div id='post_8' 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/jmooring'><span itemprop='name'>jmooring</span></a> </span> <span class="crawler-post-infos"> <time itemprop='datePublished' datetime='2024-11-27T04:06:15Z' class='post-time'> November 27, 2024, 4:06am </time> <meta itemprop='dateModified' content='2024-11-27T04:06:15Z'> <span itemprop='position'>8</span> </span> </div> <div class='post' itemprop='text'> <p>The theme you are using provides its own image render hook:<br> <a href="https://github.com/colorchestra/smol/blob/master/layouts/_default/_markup/render-image.html">https://github.com/colorchestra/smol/blob/master/layouts/_default/_markup/render-image.html</a></p> <p>And that render hook overrides the embedded render hook. So, do the following:</p> <pre><code class="lang-plaintext">mkdir -p layouts/_default/_markup touch layouts/_default/_markup/render-image.html </code></pre> <p>Then copy <a href="https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/_default/_markup/render-image.html">this</a> into the file you just created.</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> </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-24388"> <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/how-do-i-include-an-image-in-a-post/24388' class='title raw-link raw-topic-link'>How do I include an image in a post</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'>5</span> </td> <td class="views"> <span class='views' title='views'>1884</span> </td> <td> April 4, 2020 </td> </tr> <tr class="topic-list-item" id="topic-list-item-2338"> <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/how-do-i-include-images-in-my-blog/2338' class='title raw-link raw-topic-link'>How do I include images in my blog?</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'>3850</span> </td> <td> December 24, 2015 </td> </tr> <tr class="topic-list-item" id="topic-list-item-47315"> <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-linking/47315' class='title raw-link raw-topic-link'>Image linking</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"> <a href='https://discourse.gohugo.io/tag/images' class='discourse-tag'>images</a> </div> </div> </td> <td class="replies"> <span class='posts' title='posts'>6</span> </td> <td class="views"> <span class='views' title='views'>442</span> </td> <td> December 2, 2023 </td> </tr> <tr class="topic-list-item" id="topic-list-item-6253"> <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/link-in-image-post-doesnt-seem-to-work-without/6253' class='title raw-link raw-topic-link'>Link in image post doesn't seem to work without ../</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'>2</span> </td> <td class="views"> <span class='views' title='views'>878</span> </td> <td> April 20, 2017 </td> </tr> <tr class="topic-list-item" id="topic-list-item-14989"> <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-image-paths-in-hugo-in-markdowns-files/14989' class='title raw-link raw-topic-link'>Relative image paths in Hugo in markdowns files</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'>2</span> </td> <td class="views"> <span class='views' title='views'>2399</span> </td> <td> October 30, 2018 </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>