將照片上傳到 Jekyll html 中的頁面

Question

我有一個基本的 jekyll 目錄，如下所示：

├── 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

我想使用 group-members.html 文件中的這一行將照片上傳到group-members頁面：

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

該圖像肯定存在於目錄中，但是當我嘗試使用bundle exec jekyll serve編譯站點時

它返回錯誤

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

圖像顯示為損壞。 誰能幫我解決這個問題？

Answer 1

根據您的目錄結構，我看到SileHuPortrait.jpg實際上位於<source>/assets/img 。

當 Jekyll構建您的站點時，假定生成的 URL 與網絡服務器一起使用。 因此，當您有像/home/sam/Dropbox/Documents/..這樣的引用時，網絡服務器正在尋找相對於您的目標目錄（即_site文件夾）的/home/sam/Dropbox/Documents/.. 。

您看到的錯誤是因為物理路徑/home/sam/Dropbox/Documents/PhD/hellenthal-group/_site/home/sam/Dropbox/Documents/PhD/hellenthal-group/assets/img/SileHuPortrait.jpg沒有不存在。

因此，正確的用法是：

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

（注意前導斜線）

以上雖然正確， baseurl:在配置文件中設置baseurl:時不能靈活地自動適應。

---

因此，最終的解決方案是使用relative_url Liquid 過濾器：

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