hugo使用本地图片

Hugo 是一个静态网站生成器，可以用来快速构建网站。在使用 Hugo 时，如果需要使用图片，通常需要将图片上传到图床，然后在文章中通过链接引用。这种方式比较麻烦，而且不利于图片管理。 直接嵌入到markdown里更方便

解决方法

关键在于研究hugo生成的public文件夹里图片存储的目录和网站图片的超链接之间的关系，灵活应对 根据主题的不同，hugo 生成的public文件夹里的文章路径和网页里访问文章的url会有所不同，某些图片读取和文章访问地址一样的主题可以用以下的方法

如下： http://localhost:1313/posts/blog/hugo%E4%BD%BF%E7%94%A8%E6%9C%AC%E5%9C%B0%E5%9B%BE%E7%89%87/image.png

而某些主题生成静态页面的时候会将同名的文件夹和文件放在同一个目录下 那这样解决方法就很简单了

直接在文章所在目录下新建一个文件夹 文件夹名要和你的文章名一样，然后图片丢进去 最后在markdown里引入图片，比如我的图片名为image.png 那么就是直接填入![](image.png) 即可 不需要加上文件夹名

注意的坑

不要带大写字母 如果带大写字母将无法显示图片 因为浏览器访问的链接会被强制转换为小写字母 这样就和图片的实际目录对不上了

由于windows大小写不敏感 如果你在windows里将文件加到git版本控制里并且已经推送了的话此时重命名文件将只能重命名本地文件 git里的文件名是不会改变的 会导致本地能访问图片，使用GitHub Actions部署到GitHub Pages后无法查看图片的现象（直接部署静态文件可能没问题）

解决方法：进入文件所处目录 使用git命令重命名文件名然后提交即可

1
2
3
4
5
6

 git mv Hugo使用本地图片.md tmp
 git mv tmp hugo使用本地图片

 git add .
 git commit -m 'post'
 git push

不要和以下截图一样使用大写H，要用小写h