Difficulty getting images to display on build

[chrisbeardy]

Thank you for this lovely theme, I am attempting to build a small personal site using it but am getting into a little difficulty when attempting to get images to display on the build.

This only applies to the images when they are declared in the section header of the index page, e.g
content/sections/XX.md

---
title: ""
draft: false
weight: 2
images: ["images/dracula-universal.jpg"]
borderColor: "purple"
---

In this example, if I run the hugo server it displays ok, but if i run hugo then open up the index.html generated in the public folder, the section exists, but with no image.

I am deploying using netlify and have the same issue on the live site.

I was wondering if you had any advice?

My config file looks like this:

baseurl = "https://xxx.com"
title = "X & X' Wedding"
author = "chrisbeardy"
googleAnalytics = ""
enableRobotsTXT = true
defaultContentLanguage = "en"
language = "en-GB"
paginate = 3

theme = "piercer"

[params]
    description = "X and X' wedding website."

[params.postcss]
    postcss = false

[params.palette]
    text = "#000000"
    background = "#E6E6FA"
    accent = "#E6E6FA"
    foreground = "#000000"
    separator = "#bd93f9"
    cyan = "#8be9fd"
    green = "#50fa7b"
    orange = "#ffb86c"
    pink = "#ff79c6"
    purple = "#bd93f9"
    red = "#ff5555"
    yellow = "#f1fa8c"

[params.fontsizes]
    base = "1em"
    p = "1.25em"
    h4 = "1.563em"
    h3 = "1.953em"
    h2 = "2.441em"
    h1 = "3.052em"

[params.googlefonts]
    font = ""

[params.serviceWorker]
    enable = false

[params.header]
    show = true

[params.cta]
    show = true
    message = "RSVP"
    link = "#contact"

[params.fa]
    disable = false
    kit = ""

[params.form]
    show = true
    netlify = true
    action = ""
    method = "POST"
    section = "RSVP"
    disclaimer = "Please let us know if you can make it."
    inputNameName = "Name"
    inputNameLabel = "Name(s)"
    inputNamePlaceholder = "Your Name"
    inputEmailName = "Email"
    inputEmailLabel = "Email"
    inputEmailPlaceholder = "Your Email"
    inputResponseName = "Response"
    inputResponseLabel = "Response"
    inputResponsePlaceholder = "Can you make it? (yes/no)"
    inputSongRequestName = "SongRequest"
    inputSongRequestLabel = "Song Request"
    inputSongRequestPlaceholder = "Any song you want played?"
    inputMessageName = "Message"
    inputMessageLabel = "Message"
    inputMessagePlaceholder = "Any dietary requirements?"
    SubmitValue = "Send"

[params.copy]
    message = ""

[params.notfound]
    message = "Whoops, page not found."

I have custom.css which looks like this:

a:hover {
    color: var(--purple);
}

.btn {
    background-color: var(--purple);
    border: 1px solid var(--purple);
}

.btn:hover,
.btn:active {
    color: var(--foreground);
}

.single__content a {
    border-bottom: 3px solid var(--purple);
}

.single__content a:hover {
    border-bottom: 3px solid var(--purple);
}

.single__content a:visited {
    border-bottom: 3px solid var(--pink);
}

And then have overridden the style.css by creating a file in assets/css/style.css with the follwing:

/* HEADER */
.header {
    background-color: var(--accent);
    border-bottom: 5px solid var(--purple);
    display: flex;
    font-size: var(--p);
    padding: 1.15rem 1.75rem;
    position: fixed;
    justify-content: space-between;
    top: 0;
    width: 100%;
    z-index: 999;
}

.header__title {
    width: 50%;
}

.header__title__link--logo {
    width: 50%;
}

/* MENU */
.menu__items {
    background-color: var(--accent);
    border-bottom: 5px solid var(--purple);
    flex-direction: column;
    left: 0;
    position: absolute;
    text-align: center;
    top: 100%;
    width: 100vw;
}

.menu__items__item {
    display: block;
    padding: 0.75rem 1.45rem;
}

.menu__items:last-child {
    padding-bottom: 1.25rem;
}

.menu__toggle {
    cursor: pointer;
}

.menu__toggle[open=""] {
    color: var(--purple);
}

/* HERO */
.hero {
    align-items: center;
    border-bottom: 5px solid var(--purple);
    color: var(--foreground);
    display: flex;
    flex-direction: column;
    min-height: 90vh;
    padding: 9.00rem 1.75rem;
    justify-content: top;
}

.hero > *:first-child {
    margin-bottom: 1.45rem;
}

.hero > *:nth-child(2) {
    padding: 0 3.75rem;
    text-align: center;
}

.hero > p {
    font-size: var(--p);
    padding: 3.45rem;
}

.cta {
    display: block;
    text-align: center;
}

/* SECTIONS */
.section {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 90vh;
    text-align: center;
    justify-content: center;
}

.section > h1 {
    font-size: var(--h3);
}

.section > *:first-child {
    margin-bottom: 1.45rem;
}

.section > p {
    margin-left: 0.95rem;
    margin-right: 0.95rem;
}

.section a {
    border-bottom: 3px solid var(--purple);
}

.section a:hover {
    border-bottom: 3px solid var(--purple);
}

.section a:visited {
    border-bottom: 3px solid var(--pink);
}

/* CONTACT */
.contact {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 90vh;
    justify-content: center;
}

.contact__title {
    font-size: var(--h3);
    margin-bottom: 1.45rem;
}

.contact__disclaimer {
    margin-left: 0.95rem;
    margin-right: 0.95rem;
    text-align: center;
}

.contact__form {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    justify-items: center;
    width: 100%;
}

.contact__form__field {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    grid-template-areas: "label" "input";
    margin: 0.75rem 0;
    justify-content: center;
    width: 21rem;
}

.contact__form__field > label {
    grid-area: label;
}

.contact__form__field > input {
    grid-area: input;
}

input:focus~label,
input:hover~label {
    color: var(--purple);
}

.contact__form__field--submit {
    align-items: center;
    display: flex;
    justify-content: center;
}

/* FOOTER */
.footer {
    background-color: var(--accent);
    border-top: 5px solid var(--purple);
}

.social-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    grid-area: "social";
    line-height: 1.2;
    justify-content: space-around;
    padding: 0.75rem 0.75rem;
    padding-top: 1.25rem;
}

.social-links__link {
    font-size: var(--h4);
}

.contact-info {
    margin-top: 1.75rem;
}

.contact-info__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-info__info__item {
    padding: 0 1.45rem;
}

.contact-info__info__item span {
    margin-right: 0.25rem;
}

.footer__agreement,
.footer__copy {
    padding: 0.75rem 1.45rem;
    text-align: center;
}

.footer__copy {
    padding-bottom: 1.25rem;
}

/* 404 */
.notfound {
    align-items: center;
    display: flex;
    font-size: var(--h1);
    justify-content: center;
}