图片类型
支持的图片类型列表。
赞助
成为我们的资助者或赞助商，以支持我们的工作。
本页内容
赞助商
站点图片资源
存放于 assets 目录下的图片。
你需要于 URL 的路径前添加一个前置斜杠（/），以使用站点图片资源。
| Path | Markdown | Matched |
|---|---|---|
assets/images/foo.png |  | N |
assets/images/foo.png |  | Y |
assets/images/bar.png |  | Y |
页面图片资源
存放于页面目录的图片资源。
你需要按照页面 bundles 所示的结构进行组织页面，比如：
1content/
2 blog/
3 hello/
4 index.md
5 foo.png
6 bar.png
上述结构包含了一个页面（blog/hello），其包含了两个图片资源：foo.png 和 bar.png。
这样就可以在页面内容文件（blog/hello/index.md）中呈现图像。
1
2
公共图片
存放于 static 目录的图片。
| Path | Markdown |
|---|---|
static/images/foo.png |  |
static/images/bar.png |  |
外部图片
| Path | Markdown |
|---|---|
https://example.org/images/foo.png |  |
https://example.org/images/bar.png |  |
局限性
除了对齐和调整大小外，大多数处理方法只能处理站点图像资源和页面图像资源。此外，对于公共图像和外部图像的大小调整是通过内联样式实现的。
挂载公共图片
好消息是 Hugo 允许挂载 static/* 目录，以使它们成为站点资源，这样就可以使用其他处理方法了。
hugo.yaml
1module:
2 mounts:
3 - source: content
4 target: content
5 - source: static
6 target: static
7 - source: layouts
8 target: layouts
9 - source: data
10 target: data
11 - source: assets
12 target: assets
13 - source: i18n
14 target: i18n
15 - source: archetypes
16 target: archetypes
17 - source: static/uploads
18 target: assets/uploads
hugo.toml
1[module]
2 [[module.mounts]]
3 source = 'content'
4 target = 'content'
5 [[module.mounts]]
6 source = 'static'
7 target = 'static'
8 [[module.mounts]]
9 source = 'layouts'
10 target = 'layouts'
11 [[module.mounts]]
12 source = 'data'
13 target = 'data'
14 [[module.mounts]]
15 source = 'assets'
16 target = 'assets'
17 [[module.mounts]]
18 source = 'i18n'
19 target = 'i18n'
20 [[module.mounts]]
21 source = 'archetypes'
22 target = 'archetypes'
23 [[module.mounts]]
24 source = 'static/uploads'
25 target = 'assets/uploads'
hugo.json
1{
2 "module": {
3 "mounts": [
4 {
5 "source": "content",
6 "target": "content"
7 },
8 {
9 "source": "static",
10 "target": "static"
11 },
12 {
13 "source": "layouts",
14 "target": "layouts"
15 },
16 {
17 "source": "data",
18 "target": "data"
19 },
20 {
21 "source": "assets",
22 "target": "assets"
23 },
24 {
25 "source": "i18n",
26 "target": "i18n"
27 },
28 {
29 "source": "archetypes",
30 "target": "archetypes"
31 },
32 {
33 "source": "static/uploads",
34 "target": "assets/uploads"
35 }
36 ]
37 }
38}
上述配置将 static/uploads 挂载到 assets/uploads，然后你就可以像使用站点图片资源一样使用这些图片。
1