[SOLVED] How to include a PNG image in site header

Hi I’m trying to include a PNG image in the site header, the image is in the content folder with all the .md files. This is my single.html:

   { partial "header.html" . }}
<div class="header">
  <h1>{{ .Site.Title }}</h1>
  <img style="position: absolute; top:24px; right: 32px" src="dove.png" alt="peace dove" />
<div class="content">
  {{ .Content }}

{{ partial "footer.html" . }}

but dove.png does not appear - just the alt “peace dove” tag

How can I get the image to appear?


Hi there

the simple way is to put the image in static folder, the example below if you have images folder inside the static folder.

<img style="position: absolute; top:24px; right: 32px" src="/images/dove.png" alt="peace dove" />

alternative way is create a configuration for the header image in your config.toml

  logo = "/images.dove.png"

then use {{.Site.BaseURL}}{{ .Site.Params.logo }} in your image src

hope that helps

1 Like

Hi Yudy, Thanks for reply - I put the image as you sugested, but no change (no image)

and the line is now:

  <img style="position: absolute; top: 24px; right: 32px" src="/img/dove.png" alt="peace dove" />

Where did you put the image?

│      └───images (the image should be here)

the image should be somewhere inside the static folder

see my last post

check the image case extension, .PNG or .png

1 Like

Thanks, that worked - the devil’s in the detail