html - 将照片上传到 Jekyll html 中的页面
问题描述
我有一个基本的 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.
并且图像显示为损坏。谁能帮我解决这个问题?
解决方案
我看到这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
不存在。
因此,正确的用法是:
<img src="/assets/img/SileHuPortrait.jpg">
(注意前导斜杠)
baseurl:
以上内容虽然正确,但在您在配置文件中设置时无法灵活地自动适应。
所以,最终的解决方案是使用relative_url
Liquid 过滤器:
<img src="{{ 'assets/img/SileHuPortrait.jpg' | relative_url }}">
推荐阅读
- javascript - 我如何在 AsyncStorage 中进行异步/等待反应本机?
- tinymce - tinymce - 当用户键入“*”时如何将文本自动转换为项目符号
- spring-batch - 如何根据作业执行决策者跳过春季批处理中的一个步骤并继续另一个决策者?
- excel - 如何在 vba 中使用 Redim Preserve
- flutter - Dart 中的异步和等待
- windows - 客户端返回值,读入服务器
- loops - 将循环的线性时间转换为 log(n) 时间函数?
- java - 将列表中的重复值与重复次数合二为一
- jquery - 仅选择一个变体时,Woocommerce 更改变体图像
- r - 在悬停时显示与散点图点关联的标签