引用于 cdn 的图片 没法生成图册吗？

[taurusxin]

因为很多图片很大，就放到了 CDN 上，然后没有办法生成图册吗？

测试了一下，只有和文章的 md 文件放一起的本地的图才能生成图册。

使用的静态站有空间大小限制，不能传很多体积大的图

[CaiJimmy]

因为需要读取图片长宽，所以需要本地图片。

不过 Hugo 新版本有一个新的函数：resource.GetRemote 可以用来获取外部图片，可以试试看：https://gohugo.io/hugo-pipes/introduction/#get-resource-with-resourcesget-and-resourcesgetremote

需要修改 layouts/_default/_markup/render-image.html。判断下如果是外部图片就用上面的函数而不是 .Page.Resources.GetMatch

[mpv945]

可以在主题的源修正吗？现在大部分博客都是用了cdn来加速图床

[GHJayce]

有试成功吗？判断应该要怎么写呢？

[GHJayce]

贴一下我处理以后的代码：

{{- $Permalink := .Destination | relURL | safeURL -}}
{{- $image := "" -}}
{{- if hasPrefix $Permalink "http" -}}
	{{- $image = resources.GetRemote $Permalink -}}
{{- else -}}
	{{- $image = .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) -}}
{{- end -}}

...

[GHJayce]

处理以后发现的一些问题：

1. 外链的图片在启动服务(hugo server)的时候会将资源下载到resources/_gen/images目录下，然后观察渲染以后的img，链接的正是该目录下的图片，外链了个寂寞，还是会增加项目的大小:(。
2. 如果遇到图片下载超时，会出现服务启动不了的问题。
3. 如果外链图片比较多，可能会导致启动服务缓慢。

目前暂时去掉处理以后的代码了，兜兜转转最终回到了原点，看有没有人能够解决这个问题。

[Lovirr]

我试过使用zoom.js,可以成功对图片进行缩放🙏🏻但是由于布局特性，放大后的图片没法超出文章那一栏，不知道是否可以作为参考

[mpv945]

解决了吗？我也是这个问题，试了很多办法都不行。远程图片就不能获取图片信息了吗？

[GHJayce]

纠正一下第一点的描述，因为我的环境hugo.yaml文件中imageProcessing.content.enabled的配置开启了，Resize会对外链图片进行裁剪，裁出480宽、1024宽的两张图片并放到了resources/_gen/images/post/xxx_name/目录下，所以看起来就像是外链图片下载下来的现象，这是个误会。

[GHJayce]

外链图片的问题已经解决，在保持原有功能的基础上仅新增了对外链图片的支持，需要修改的文件不多。

经过测试，hugo server和hugo命令执行以后的效果均表现正常，因为是外链，所以会对首次启动有一些影响。

详细过程都在Hugo Theme Stack图库是怎么工作的？怎样才能支持外链图片？这篇文章里了，感兴趣的话可以看下。

---

改动的文件如下：

1、layouts/_default/_markup/render-image.html

{{- $Permalink := .Destination | safeURL -}}
{{- $image := "" -}}

{{- if and (hasPrefix $Permalink "http") (default false .Page.Site.Params.render.image.externalLink.enabled) -}}
	{{- with resources.GetRemote $Permalink -}}
		{{- with .Err -}}
			{{- $warnMsg := printf "%s" $Permalink -}}
			{{- warnf "%s.\nPlease check the link: %s\n" . $warnMsg -}}
		{{- else -}}
			{{- $image = . -}}
		{{- end -}}
	{{- else -}}
	  {{- warnf "Unable to get remote resource %q" $Permalink -}}
	{{- end -}}
{{- else -}}
	{{- $image = .Page.Resources.GetMatch (printf "%s" $Permalink) -}}
	{{- if $image -}}
		{{- $Permalink = $image.RelPermalink -}}
	{{- end -}}
{{- end -}}
{{- $alt := .PlainText | safeHTML -}}
{{- $Width := 0 -}}
{{- $Height := 0 -}}
{{- $Srcset := "" -}}

{{/* SVG and external images won't work with gallery layout, because their width and height attributes are unknown */}}
{{- $galleryImage := false -}}

{{- if $image -}}
	{{- $notSVG := ne (path.Ext .Destination) ".svg" -}}

	{{- if $notSVG -}}
		{{- $Width = $image.Width -}}
		{{- $Height = $image.Height -}}
		{{- $galleryImage = true -}}

		{{- if (default true .Page.Site.Params.imageProcessing.content.enabled) -}}
			{{- $small := $image.Resize `480x` -}}
			{{- $big := $image.Resize `1024x` -}}
			{{- $Srcset = printf `%s 480w, %s 1024w` $small.RelPermalink $big.RelPermalink -}}
		{{- end -}}
	{{- end -}}
{{- end -}}

<img src="{{ $Permalink }}"
	{{ with $Width }}width="{{ . }}"{{ end }}
	{{ with $Height }}height="{{ . }}"{{ end }}
	{{ with $Srcset }}srcset="{{ . }}"{{ end }}
	loading="lazy"
	{{ with $alt }}
		alt="{{ . }}"
	{{ end }}
	{{ if $galleryImage }}
		class="gallery-image" 
		data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
		data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
	{{ end }}
>

2、hugo.yaml，只放出改动的内容

params:
	imageProcessing:
		content:
			enabled: false
	render:
		image:
			externalLink:
				enabled: true

[Lovirr]

感谢大佬！解决了一直以来的困扰🙏🏻

[taurusxin]

哈哈，看了你的博客，其实我并没有解决问题，我要解决了当然放出来啦！你的方案我明天试试看

[GHJayce]

@Lovirr 嘿嘿，这也是我的困扰

[GHJayce]

哈哈，感谢你@taurusxin标记我为答案，期望作者能有更好的解决方案并把它放进版本里。