fix: 🐛 Fix issues with images not showing up

Author: nyhryan

compose.yaml

@@ -9,7 +9,7 @@ services:
 
   serve:
     image: hugomods/hugo:exts-non-root
-    command: server --poll 1000ms --buildDrafts --noHTTPCache --renderToMemory -p 13130
+    command: server --poll 1000ms --buildDrafts --noHTTPCache --renderToMemory -p 13130 --baseURL http://localhost/
     volumes:
      - "./:/src"
      - "~/hugo_cache:/tmp/hugo_cache"

content/posts/hugo/write-a-blog-with-hugo-and-obsidian/index.md

@@ -122,26 +122,26 @@ Create a new template file. Using this template, we can create a new blog post d
 
 Use `Create new note from template` and select the template you've just created to write a new blog post.
 
-![](/attachments/Obsidian_FakraXQdCq.png)
+![](attachments/Obsidian_FakraXQdCq.png)
 
 Obsidian will prompt a new title. This is what `tp.system.prompt(...)` does!
 
-![](/attachments/Obsidian_ZIy6HuS2Ti.png)
+![](attachments/Obsidian_ZIy6HuS2Ti.png)
 
 Pressing enter will create a new directory and `index.md` inside.
 
 > Sometimes, creating note from the template, while `serve` Hugo container is running, might not read by Hugo server. If so, just simply restart the `serve` container.
 
 ## 4. Attaching images
 
-![](/attachments/Pasted%20image%2020250824182120.png)
+![](attachments/Pasted%20image%2020250824182120.png)
 
 Under Obsidian settings, go to `File and links` and you will find the setting above. Changing this will create `attachments` folder inside each new blog post directory.
 
-![](/attachments/Pasted%20image%2020250824182242.png)
+![](attachments/Pasted%20image%2020250824182242.png)
 
 Also set `New link format` to `Relative path to file` so that the link to the images will be like `attachments/image_name.png`.
 
-![](/attachments/MiXgu5xYnD.png)
+![](attachments/MiXgu5xYnD.png)
 
 Attachments will be living under the same post's directory now.

layouts/_default/_markup/render-image.html

@@ -0,0 +1,7 @@
+<p>
+  <img 
+    src="{{ .Page.Site.BaseURL }}{{ .Destination | safeURL }}"
+    {{- with .PlainText }} alt="{{ . }}"{{ end -}}
+    {{- with .Title }} title="{{ . }}"{{ end -}}
+  >
+</p>