Render full image URLs in your Hugo site with a markup render hook

README.md

Render full image URLs in your Hugo site

This is a markup render hook for Hugo sites to change the behavior of image links in your built site. It should live at layouts/_default/_markup/render-image.html.

If the image link begins with http, the link will be rendered as-is.

If not, the page permalink will prefix the image URL to produce the full path to the image in the rendered site page.

render-image.html

{{ $link := string .Destination }}
{{ if hasPrefix $link "http" }}
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
{{ else }}
<img src="{{ .Page.Permalink }}{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
{{ end }}