一篇好的文章一般是图文并茂的。图片对内容的输出有很大的帮助,正所谓一图胜千言。

在Hugo的blog中添加图片非常简单,这篇文章就是简单讲解如何实现的。

在哪里放置图片

Hugo目录内有多个子文件夹以及文件,如下图所示:

Hugo dir

其中static目录用来放置静态资源,blog中使用的图片就可以放在这个文件夹内。例如这篇文章使用的hugo-dir.png、hugo-logo-wide.svg等。

Hugo static

如何使用图片

Hugo的blog使用Markdown标记语言实现,其引入图片的语法如下:

![自定义图片名称](图片位置)

要在Hugo的blog中引入图片,只要将 图片位置 写成以static为根目录的地址即可。

例如在static目录下我放置了hugo-logo-wide.svg图片,要在blog中引入该图片则应该写成如下形式:

![Hugo logo](/hugo-logo-wide.svg)

这样就能正常显示出该Hugo Logo啦。

Hugo logo

是不是非常简单?