本文记录在使用Hugo生成静态网站过程中，关于文章本地图片插入的问题

Hugo静态资源载入逻辑

  1. hugo 的静态文件放置在 /static 文件夹下，文章 markdown 文件放在 /content/post 文件夹下

  2. hugo 生成的 public 文件夹（即整个网页静态文件），会将static里的内容放到网站根目录

  3. 基于以上两点，图片的相对路径要写成这种格式：![imagename](/img/imagename.png)

  4. 由于 markdown 和生成的 html 的图片路径是一致的，因此 markdown 里也要这么写。但是如果直接把图片放到 /static/img 里，在本地就无法正常显示这个文件夹

    显然不能，因为路径不一致：

    static：C:\Users\Deng-\OneDrive\HugoBlog\static\img

    markdown文档：C:\Users\Deng-\OneDrive\HugoBlog\content\post

解决方案

基于以上4点原因，解决方案有以下几种：

  1. 在 /post/img 里放图片，然后复制到 /static/img 评价：麻烦

  2. 在1的基础上，写一个批处理，完成复制的任务；（因为之前写过的批处理：生成 public.cmd，只要在前面加上复制的命令就行） 评价：可行，但是不完美，可能出现文件权限问题

  3. 不管，就当瞎了，本地不看，直接看server实时渲染 评价：可行，但是太惨了

  4. 做一个 link，链接两个文件夹 评价：一劳永逸，可行。建立链接 cmd 命令：mklink C:\Users\Deng-\OneDrive\HugoBlog\content\post\img C:\Users\Deng-\OneDrive\HugoBlog\static\img /J

至此，hugo的配置已经完毕，但是还可能有其他的问题导致图片加载有问题

其他问题

  • 严格注意路径：只能写成 /img/imagename.png 的形式（注意 / 和 \ 的区别)

可能是当前主题不支持的原因，嵌入图片的代码只能写成这样：![imagename](/img/imagename.png)；<img src="" alt="" style="zoom:50%;" /> 这种格式的修改图片缩放比例的代码也是不能用的

  • 为了方便，我们希望在typora里粘贴的图片直接到img路径下，为此要做以下两步：

    1. 在markdown的文件头写入图片根目录，根目录为当前文件夹(./) ：typora-root-url: ./（也可以在格式->图像->点击设置图片根目录，选择 \content\post typora会自动会加入这行配置）
    2. typora偏好设置，设置图像复制到指定路径 ./img，应用规则优先使用相对路径

❗❗再次提醒，路径严格遵循 /img/imagename.png 写法。在typora中，少了一个前斜杠的 img/imagename.png 也能显示，但是在生成的文件中，少了 / 时，文件地址将被解析为 域名/文章名/img/imagename.png 而不是 域名/img/imagename.png ，图片会找不到。

后记

只是因为对本地图片的插入有执念，折腾了很久，中途一度想放弃，最后稀里糊涂试出来了，不确定任何情况下都能生效。凑巧，试出来了而已，很多坑都是，莫名其妙踩出来的，真的就挺玄学的。其实最方便的还是直接用对象存储OSS，不用搞得这么麻烦。阿里云的我都已经开通了，还没用七牛云有10G免费额度，我没注册。下次再碰到这种问题，还是直接OSS走起吧。

参考资料

相对路径：https://www.cnblogs.com/crizygo/p/5369081.html

mklink：https://cloud.tencent.com/developer/article/1341325