Option to cache remote image locally.

[Sped0n]

中文版本

通过hugo自带的GetRemote方程和一些比较鲁棒的匹配方式将图床上的图片缓存到本地，主要目的是解决图床图片不手动设置宽高就会出现懒加载布局偏移的问题，缓存是其次（hugo只能为存储到本地的图片获取宽高），我的想法是将这个功能作为可选项提供给用户（默认关闭），因为这个功能的Pros and Cons比较明显。

优点

• 可以自动为图床上的图片获取宽高，避免懒加载布局偏移；
• 提高加载体验的一致性；
• 图片缓存到本地以后可以基于hugo自带的图像处理功能实现很多功能，比如srcset的内容可以基于hugo的image resize生成不同尺寸的加载图（参照MDN文档），甚至在resize的过程中实现普通图片转换为webp格式。

缺点

• 需要更多的本地磁盘空间；
• 网站构建时间会受到图床图片加载速度的影响。

English version

With the GetRemote function provided by hugo and some robust matching methods, DoIt now can cache remote images locally. This feature mainly focus on adding height and width to remote images in markdown to prevent layout shifts, caching these images locally is more like an added benefit. The advantages and disadvantages of this feature are relatively obvious, so it will be offered as an option(off by default) to the user.

Pros

• Automatically add width and height to images on remote sources, avoid the occurrence of layout shift.
• Improve the consistency of the page loading experience.
• Lots of features can be achieved with the images cached locally, such as letting hugo crop different size images for responsive loading, or even better, convert these images to modern webp format while resizing.

Cons

• More local disk space required.
• Site build time will be affected by th loading speed of remote images.

如果作者您接收这项更改，我之后会上传具体配置文件和文档的更改

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @HEIGE-PCloud on Vercel.

@HEIGE-PCloud first needs to authorize it.

[Sped0n]

测试markdown文件：https://github.com/Sped0n/DoIt/blob/dev/exampleSite/content/posts/cf_cname_2022.md

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
do-it	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Mar 23, 2023 at 10:17AM (UTC)

[HEIGE-PCloud]

感谢你的 PR！等配置文件和文档准备好了就可以合并了 :)

[Sped0n]

想问一下render-image.html您这边需要有更多更改吗？
目前我这边的修改算是一个比较粗暴的修改，感觉对于一些尺寸较小的图片单纯跟随figure设置width: 100%会有点突兀，有种强行拉大的感觉，不知道作者您这边有什么意见？

[HEIGE-PCloud]

我似乎并没有发现宽度问题，如果宽度不到 100% 的图片会按照原尺寸显示，宽度超过 100% 应该被 max-width cap 在 100%。

[Sped0n]

感觉在这里由`figure`包裹的图像有点过大了，在没有缓存到本地之前基本是和下面下载失败的stormtroop cat相似大小的

没有加入缓存功能前的大小：

[HEIGE-PCloud]

我看了一下为为什么这张图片一直获取错误的原因 https://octodex.github.com/images/stormtroopocat.jpg

https://github.com/gohugoio/hugo/blob/d33a7ebcc16e804f1db0dc1f1edad4d9f9e816ef/media/mediaType.go#L71
https://github.com/gohugoio/hugo/blob/d33a7ebcc16e804f1db0dc1f1edad4d9f9e816ef/media/mediaType.go#L93

Hugo 会首先检测文件本身的 content-type，然后把它和 reponse 里收到的 content-type 做比较。

https://github.com/gohugoio/hugo/blob/d33a7ebcc16e804f1db0dc1f1edad4d9f9e816ef/media/mediaType.go#L112

如果它们不相同就算识别失败。看注释这是期望行为。

这张图虽然结尾是 .jpg，GitHub 发的 content-type 也是 image/jpeg，但是实际上是张 PNG 图，然后 Hugo 就拒绝 GetRemote 了。

可能自己配置图床的时候也要小心点（

[Sped0n]

我看了一下为为什么这张图片一直获取错误的原因 https://octodex.github.com/images/stormtroopocat.jpg

https://github.com/gohugoio/hugo/blob/d33a7ebcc16e804f1db0dc1f1edad4d9f9e816ef/media/mediaType.go#L71 https://github.com/gohugoio/hugo/blob/d33a7ebcc16e804f1db0dc1f1edad4d9f9e816ef/media/mediaType.go#L93

Hugo 会首先检测文件本身的 content-type，然后把它和 reponse 里收到的 content-type 做比较。

https://github.com/gohugoio/hugo/blob/d33a7ebcc16e804f1db0dc1f1edad4d9f9e816ef/media/mediaType.go#L112

如果它们不相同就算识别失败。看注释这是期望行为。

这张图虽然结尾是 .jpg，GitHub 发的 content-type 也是 image/jpeg，但是实际上是张 PNG 图，然后 Hugo 就拒绝 GetRemote 了。

可能自己配置图床的时候也要小心点（

我当时猜测也是http response的问题，不过没有仔细去查，这个获取失败调了很久才找到一个比较鲁棒的方式

[Sped0n]

感谢你的 PR！等配置文件和文档准备好了就可以合并了 :)

配置文件和文档已准备完毕。