将照片上传到 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页面，使用group-members.html文件中的这一行：

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

图像肯定存在于目录中，但是当我尝试使用 bundle exec jekyll serve

编译站点时

它returns错误

[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: 时无法灵活地自动适应。

所以，最终的解决方案是使用relative_url液体过滤器：

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

将照片上传到 Jekyll 中的页面 html

Uploading a photo to a page in Jekyll html

html

jekyll