[英]Uploading a photo to a page in Jekyll html
I have a base jekyll directory which looks like this:我有一个基本的 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
And I want to upload a photo to the group-members
page, using this line in the group-members.html file:我想使用 group-members.html 文件中的这一行将照片上传到
group-members
页面:
<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
该图像肯定存在于目录中,但是当我尝试使用
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?
谁能帮我解决这个问题?
I see that SileHuPortrait.jpg
is actually inside <source>/assets/img
based on your directory structure .根据您的目录结构,我看到
SileHuPortrait.jpg
实际上位于<source>/assets/img
。
When Jekyll builds your site, the URLs generated are assumed to be used with a web-server.当 Jekyll构建您的站点时,假定生成的 URL 与网络服务器一起使用。 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).因此,当您有像
/home/sam/Dropbox/Documents/..
这样的引用时,网络服务器正在寻找相对于您的目标目录(即_site
文件夹)的/home/sam/Dropbox/Documents/..
。
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.您看到的错误是因为物理路径
/home/sam/Dropbox/Documents/PhD/hellenthal-group/_site/home/sam/Dropbox/Documents/PhD/hellenthal-group/assets/img/SileHuPortrait.jpg
没有不存在。
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.以上虽然正确,
baseurl:
在配置文件中设置baseurl:
时不能灵活地自动适应。
So, the final solution is to use the relative_url
Liquid filter :因此,最终的解决方案是使用
relative_url
Liquid 过滤器:
<img src="{{ 'assets/img/SileHuPortrait.jpg' | relative_url }}">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.