Github Pages使用Jekyll在.md文章中无法显示图片

Question

我用Jekyll/Github Pages创建了一个简单的博客。目录树的组织方式如下：

• _posts
  • post1.md
• assets
  • Untitled.png
  • Untitled1.png
• _config.yml
• index.md

在post1.md中，我通过以下方式嵌入图片：

![Untitled](/assets/Untitled.png)
![Untitled1](/assets/Untitled1.png)

Github预览效果良好，但在我的网站上无法显示图片。请帮我解决这个问题，我已经花了2天时间尝试修复，但仍然不起作用。图片链接如下：Github预览 和 网站展示。

- Đức Nguyễn Minh

Answer 1

需要编辑的两个地方

问题可能是你没有在_config.yml文件中设置URL，因此不完整的URL会导致一些故障。你需要做2件事情！

1. URL设置
2. 图像标记设置

URL设置

在_config.yml中添加2行：

#_config.yml

url: 'https://your-github-username.github.io/' # your main domain
baseurl: 'your-repo-name/' # if you're using custom domain keep this blank example: baseurl: ''

现在我们已经完成了URL设置，接下来编辑post1.md文件中的锚标签或链接标签。

图像标签设置

让我们深入了解您的图像标签，它以markdown格式呈现，如下所示：

![Untitled](/assets/Untitled.png)

请将其编辑为以下内容：

<img src="{{site.baseurl | prepend: site.url}}assets/Untitled.png" alt="Untitled" />

<!-- OR -->

<img src="{{ "/assets/Untitled.png" | prepend: site.baseurl | prepend: site.url}}" alt="Untitled" />

这里：

• {{...}}是Liquid过滤器语法
• site.url从_config.yml文件中收集URL
• site.baseurl收集baseurl，以添加到GitHub Pages的URL后面
• **| prepend: ** 是一个过滤器，意思是在site.baseurl之前加上site.url。 这个标签将呈现如下内容：

<img src="https://your-github-username.github.io/your-repo-name/assets/Untitled.png" alt="Untitled" />

就是这样。我想这将有助于您完美地完成工作。事实上，这个答案已经由我在此处给出：https://stackoverflow.com/a/67733921/14387700

...

祝Jekyll愉快

- Abrar Jahin