Wrong URL of image

support
1

Hi everyone,
In my post markdown file, I add an image:

![](https://pic-1305825228.cos.ap-beijing.myqcloud.com/img/image-20231019205115923.png)

And after I run the hugo command, the html URL is:

<img src="/https:/pic-1305825228.cos.ap-beijing.myqcloud.com/img/image-20231019205115923.png"

How do I fix it? Thanks!

Xnip2023-11-10_18-45-21
Xnip2023-11-10_18-45-211920×2020 316 KB

2

It looks like your image render hook (layouts/_default/_markup/render-image.html) does not handle absolute URLs.

3

This is the code of render-image.html :

{{- $image := .Page.Resources.GetMatch (printf “%s” (.Destination | safeURL)) -}}
{{- $Permalink := .Destination | relURL | safeURL -}}
{{- $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” -}}
{{- $Permalink = $image.RelPermalink -}}

{{- 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 }}

How do I modify it?

4

So that it takes into account external images too. What happens right now is this:

{{- $image := .Page.Resources.GetMatch (printf “%s” (.Destination | safeURL)) -}}

searches for an image resource locally. I have no idea what happens when you pass it an external URL. image is probably nil. In the next step, .Destination (which is the image URL) is passed to relURL. This is most probably not what you want for an external URL:

Nor would absURL be sensible here – we’re talking about an external URL, so why would you want it to have any relation to your baseURL? Simply using .Destination | safeURL should be enough (I think).

While you’re at it, you might want to rework the “responsiveness” of the images. Providing a srcset without sizes might not make a lot of sense:

Also, please put ALL YOUR CODE in three backticks like so
```
code goes here
```
That makes it a lot (A LOT) easier to copy and prevents stupid thinks like curly quotes in code.

5

Hi chrillek,
Thanks for your help! I found the problem that I didn’t set the baseURL.
And now, the URL of image is OK.
Thank you!