Inserted images in .md files not showing up

support
1

I’m new to Hugo and only have some basic web design experience in the past. I’m trying to insert my own image into a new widget.

In the .md file, I have something like ! [] (/img/map.png). The image was pretty large, and I’ve tried resizing the file, but I still can’t get the image to show up. What’s the best practice for fixing this in Hugo?

2

Without a bit of context it’s hard to find the issue? Could you post the file tree of your hugo site?

  • is the image you’re linking in the static folder or right next to your content file?
  • do you host your blog in a subdirectory, e.g. at www.example.com/blog?
3

I’m using the academic theme. My image is in static/img and my widget is under content/home/my_widget.md. My base URL in the config file is a subdirectory, www.uni.edu/~name.

I can get my portrait photo, a variable in the config file, to show up, but any images I place in the widgets are not appearing. My apologies for not knowing what information to give - happy to add anything that could be helpful.

4

It seems to be a problem with the baseurl being a subdirectory, which will be quite common for those using the academic theme. This discussion and this discussion talk about the issue.

As a beginner, I’m still not sure what my best approach is after reading those threads if I want to use a theme.

5

It seems to be a problem with the baseurl being a subdirectory, which will be quite common for those using the academic theme. This discussion and this discussion talk about the issue.
As a beginner, I’m still not sure what my best approach is after reading those threads if I want to use a theme.

I just posted my own solution to this in another thread, namely creating a custom shortcode that takes the baseURL into account when creating the link to the file. It fixed the problem for me.

1 Like
6

Thank you, that shortcode did the trick for me!