5.添加图片

添加带有 Doks 短代码的小图像或大图像(添加额外的类),或使用 markdown(可移植性)。图像是延迟加载的,模糊的,并且响应迅速。

将图像放在页面捆绑包中,如下所示:

.. 
├── blog/ 
│ ├── say-hello-to-doks/ 
│ │ ├── index.md 
│ │ └── say-hello-to-doks.png
│ └── _index.md
└── _index.md

另请参阅 Hugo 文档:页面捆绑包

Markdown

添加图片

元素标签 <img> 用于小图像,元素标签 <figure> 用于大图像。 Set smallLimit in ./config/_default/params.toml, e.g. smallLimit = "360"

示例

![Image](day-and-night-escher.jpg "Day and Night, 1938 — M.C. Escher")

(注意:图片地址与图片名称间用空格隔开)

将展示成 image 另请参阅 Markdown 指南:图像

短代码-添加小图图像

使用 imgsrc, 和 data-src

💡有效的图像格式包括:webp、jpg、png、tiff、bmp 和 gif。

使用短代码将页面捆绑包中的小图像添加到页面。img-simple

示例

将处理成: image

短代码-添加大图像

使用 figure and figcaption with imgsrc, and data-srcset. With noscript fallback.

示例

将处理成: image 矩形