将照片上传到 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

它返回错误

[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 被假定与 Web 服务器一起使用。因此，当您有像 之类的引用时/home/sam/Dropbox/Documents/..，网络服务器会查找/home/sam/Dropbox/Documents/..相对于您的目标目录（即_site文件夹）的目录。您看到的错误是因为物理路径/home/sam/Dropbox/Documents/PhD/hellenthal-group/_site/home/sam/Dropbox/Documents/PhD/hellenthal-group/assets/img/SileHuPortrait.jpg&nbsp;不存在。因此，正确的用法是：<img&nbsp;src="/assets/img/SileHuPortrait.jpg">（注意前导斜杠）baseurl:上面的内容虽然正确，但在配置文件中设置时无法灵活地自动适应。所以，最终的解决方案是使用relative_urlLiquid 过滤器：<img&nbsp;src="{{&nbsp;'assets/img/SileHuPortrait.jpg'&nbsp;|&nbsp;relative_url&nbsp;}}">