Slash being removed from image path

support
1

On a custom 404 page, I am loading two images directly in the layout.

<img class="img-fluid logoNav404" src="/images/logo.png">

and

<img class="img-fluid" src="/images/big-logo.png">

I built and deployed our sit. The first image is loading and when inspected in the console, the path is exactly as above. The second image isn’t loading and the console’s path is…

images/big-logo.png

Why is the slash at the front being removed and how can I fix it?

*edited to correct backslash -> slash

2

first: it’s a slash, not a backslash
second: show your complete 404 template and maybe a way to see for ourself what the system is creating (testing website?)

3

Sure thing!

{{ define "main" }}

<div class="container-fluid" id="jumbo404">
  <div class="row">
    <div class="col-12">
      <nav id="nav-desktop" class="navbar fixed-top">
          <a class="navbar-brand" href="/">
            <img class="img-fluid logoNav404" src="/images/logo.png">
          </a>
          <ul class="navbar-nav">
              {{ range $.Site.Data.nav.navlist }}
            <li class="nav-item active">
              <a class="nav-link" id="nav404" href="{{ .url }}">{{ .name }}</a>
            </li>
            {{ end }}
          </ul>
        </nav>
        
        <nav id= "nav-mobile" class="navbar navbar-expand-lg fixed-top">
          <a class="navbar-brand" href="/">
            <img class="img-fluid logoNav404" src="/images/logo.png">
          </a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"><i id="burger404" class="fas fa-bars"></i></span>
          </button>
          <div class="navbar-collapse collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto navDrop">
              {{ range $elem_val := $.Site.Data.nav.navlist }}
                <li class="divider"></li>
                <li class="nav-item active">
                  <a class="nav-link" href="{{ $elem_val.url }}" id="nav404">{{ $elem_val.name }}</a>
                </li>
              {{ end }}
            </ul>
          </div>
        </nav>          
    </div>
    <div class="w-100"></div>
    <div class="col-12 showcaseText" id="height404">
      <div class="row justify-content-center">
        <div class="col-12 col-lg-8">
          <div class="heroSpace">
            <h1 class="centerText">{{ .Params.jumboHeading }} </h1>
              <p class="centerText jumbotronSub">{{ .Params.jumboText }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="container navContainer404">
  <div class="row">
    <div class="col-12 justify-content-md-center col-md-10 flex404">
      <div>
        <img class="img-fluid" src="/images/big-logo.png">
      </div>
      <div>
        <h1 class="notFound">404</h1>
        <h3 class="oops">Oops! We can't seem to find the page you are looking for.</h3>
      </div>
    </div>
  </div>
</div>

{{ partial "footer" . }}

{{ partial "tail" . }}

{{ end }}

edit: can’t provide the testing site unfortunately

4

I don’t know the answer, but maybe I can contribute a bit of guesswork :slight_smile: Because I can’t see anything wrong with the template you posted, my guess is, the problem is elsewhere than Hugo or the template itself. (By the way, would be useful if you supplied the Hugo version you’re using.)

  • Is the logo file actually deployed with the website? If you go to www.your-site.com/images/big-logo.png, does it show?
  • If you look at the rendered page’s source – via Ctrl + U View Source, not the console – do you see the leading slash or not?
  • Does any of the partials contain the said logo? (perhaps you were looking at another part of the HTML code)
  • Does any of your site’s templates contain src="images/big-logo.png" – the entry without the leading slash?
5

We can’t determine it from what you’ve shared. As you can’t share the project you are working in, our recommendation is to create a sample project you can share, and reproduce the error. :slight_smile: