Hello there,
I’m new to Hugo (and to web designing in general). I’ve just created my website based on the Hyde-y template but I’m not able to insert images and other contents.
I’ve inserted the following in the /content/main.md file:
<img src="/img/profile.jpg" width="300" />
where /img/profile.jpg is located in the static folder. What is wrong with this approach?
Thank you in advance for your help!
You might look at this example of using a built-in figure shortcode. Looks something like this:
{{< figure src="/media/image.jpg" title="Cool shot of whatever" >}}
Source is relative to static.
There are other options you can optionally specify, like alternate text and attribution text, but that is basically all you need (and really, you could probably do without the title, just the source).
Thanks a lot for your reply, but this does not seem to work as the line
{{< figure src="/img/profile.jpg" >}} appears as text on my webpage. What am I doing wrong?
Btw, I think that my previous attempt, i.e., <img src="/img/profile.jpg" width="300" />, should be working: maybe a problem of folders/subfolders?
@thedon If you have your site in a git repo, post it here please. This will be easier to troubleshoot if we can see your project structure
Problem solved: there was one slash too many (for a reason that I still don’t fully understand), so the right path is <img src="img/profile.jpg" width="300" />.
Corrected. It was the very first slash.
Now that I think of it, that makes sense. The first slash means “relative to the root folder”, i.e. the root file system on your computer, or the highest level folder that your site is in. I noticed that just before you posted that.
Isn’t the root folder the same folder of my html file? I thought it should work all the same.
I’m not terribly familiar with this, but I believe it would try to access the root folder of whatever it’s on. If your computer, that would be C: or / depending on your operating system. If on a server, that would be the root of the folder you uploaded, i.e. cool-site which would have content, static, etc. inside it.
I see, thanks for the explanation!
That doesn’t sound right. Especially if using Hugo Server, which would make the root directory be the folder containing the generated site. Thus having a leading slash should work.
If you’re generating the site and then opening one of the HTML files from the public/ directory, then you’ll run into that problem, but you’ll run into a bunch of others too since your local machine isn’t set up to serve requests from your site.
I see. That makes sense, but then the path to the image would still not have static specifically named, which would mess things up if it was going relative to the site directory (I think. Like I said, I’m not terribly familiar with this, but it has happened to me a few times).
So if you reference /path/to/image.jpg as the path to your image at static/path/to/image.jpg, that exact path will be used in the src attribute of the img tag. So on sites that have a BaseURL of a domain, like example.com, that will work, because it resolves to example.com/path/to/image.jpg, which is where the image is placed in the generated site.
If the BaseURL has a subdomain, like example.com/hugo, the image file will be placed at example.com/hugo/path/to/image.jpg - relative to the site root - but the src="/path/to/image.jpg" will resolve to example.com/path/to/image.jpg due to how root-relative URLs work in browsers.
This is how it worked the last time I tried it. An easier - and better - method nowadays is to have pictures in a page bundle with the page content itself, so content/some-page.md is at content/some-page/index.md and the image is at content/some-page/image.jpg. The figure shortcode can then use the path image.jpg and load the image on the page correctly.
Hopefully this makes sense to you. The main takeaway here is that static files have historically been a bit painful in Hugo, and page bundles are much better for including images in figure shortcodes.