Preview images with localhost

support
1

I am using Hugo 0.68.3. I am previewing my site with localhost. However images are not found with the localhost instance. Only when I publish my website (with netflify) do the images appear. The image should be at images/screenshot.png (and I can see that it is there in the /public folder) but when running localhost I get a 404. Is there a way to work around this?

2

There is a difference between images/image.png and /images/image.png. The first one points to the folder images RELATIVE to the current page, the second one is from the ROOT of the website. You should have them all be linked via / from the root.

Sample for relative images:

You are on http://localhost:1313/posts/my-post/ > the image images/image.png is attempted to be found at /posts/my-post/images/image.png.

There is probably an issue in your layouts. Have a look at absURL and relURL.

2 Likes
3

Thanks for your response. This is what I have in my markdown. It looks like it follows your second example.

{{< figure src="/images/screenshot.png" >}}

When I copy the link location in my localhost instance I get this http://localhost:1313/images/screenshot.png which looks like it is getting it from the root, where I would expect it to be (and is present when I release). The file is located here public/images/screenshot.png

4

Try this:

<img src="{{ .Site.BaseURL }}/image.jpeg" alt="">

5

You should consider what @gethugothemes said.

also when you run command

hugo --minify

output to publishDir

assume your config.toml

baseURL = "http://localhost:8000/" # 👈
publishDir="public"

you shouldn’t open the public/index.html directly

you should run a fileserver locally

use python.http

cd public
start python -m http.server
start http://localhost:8000/

or you can use golang

package main

import (
	"github.com/gorilla/mux"
	"log"
	"net/http"
	"os"
)

func main() {

	publishDirFullPath := "C:\\xxx\\...\\public"

	if err := os.Chdir(publishDirFullPath); err != nil {
		log.Fatal(err)
	}

	router := mux.NewRouter()
	router.PathPrefix("/").Handler(http.FileServer(http.Dir(".")))
	log.Fatal(http.ListenAndServe(":8000", router))
}
6

based on @Carson comments, I changed the baseURL to my localhost (http://localhost:1313) and it started to work! I had it pointing to the base URL of my site before. Even setting baseURL to empty worked. I just need to make sure to not commit that change and only use it for local development. Thanks everyone for the help!

7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.