Uploading a photo to a page in Jekyll html

Question

I have a base jekyll directory which looks like this:

├── 404.html
├── about.markdown
├── assets
│   └── img
│       ├── mapcolor360_dbc.png
│       └── SileHuPortrait.jpg
├── _config.yml
├── favicon.ico
├── Gemfile
├── Gemfile.lock
├── group-members.html
├── _includes
│   └── footer.html
├── index.markdown
├── _layouts
├── media.md
├── openings.md
├── _posts
│   └── 2019-12-18-welcome-to-jekyll.markdown
├── publications.md
├── research.html
├── research.md
├── _sass
│   └── _variables.scss
├── _site
│   ├── 404.html
│   ├── about
│   │   └── index.html
│   ├── assets
│   │   ├── img
│   │   │   ├── mapcolor360_dbc.png
│   │   │   └── SileHuPortrait.jpg
│   │   └── style.css
│   ├── favicon.ico
│   ├── feed.xml
│   ├── group-members
│   │   └── index.html
│   ├── index.html
│   ├── jekyll
│   │   └── update
│   │       └── 2019
│   │           └── 12
│   │               └── 18
│   │                   └── welcome-to-jekyll.html
│   ├── media
│   │   └── index.html
│   ├── openings
│   │   └── index.html
│   ├── publications
│   │   └── index.html
│   ├── research
│   │   └── index.html
│   └── software
│       └── index.html
└── software.md

And I want to upload a photo to the group-members page, using this line in the group-members.html file:

<img src="/home/sam/Dropbox/Documents/PhD/hellenthal-group/assets/img/SileHuPortrait.jpg">

The image definitely exists in the directory, but when I try to compile the site with bundle exec jekyll serve

It returns the error

[2020-03-20 19:36:13] ERROR `/home/sam/Dropbox/Documents/PhD/hellenthal-group/assets/img/SileHuPortrait.jpg' not found.

And the image appears as broken. Can anyone help me with this issue?

Answer 1

I see that SileHuPortrait.jpg is actually inside <source>/assets/img based on your directory structure .

When Jekyll builds your site, the URLs generated are assumed to be used with a web-server. So when you have a reference like /home/sam/Dropbox/Documents/.. , the webserver is looking for /home/sam/Dropbox/Documents/.. relative to your destination directory (which is the _site folder).

The error you're seeing is because the physical path /home/sam/Dropbox/Documents/PhD/hellenthal-group/_site/home/sam/Dropbox/Documents/PhD/hellenthal-group/assets/img/SileHuPortrait.jpg doesn't exist.

The correct usage would therefore be:

<img src="/assets/img/SileHuPortrait.jpg">

( Note the leading slash )

The above while correct, isn't flexible to automatically adapt when you set baseurl: in the config file.

---

So, the final solution is to use the relative_url Liquid filter :

<img src="{{ 'assets/img/SileHuPortrait.jpg' | relative_url }}">