Embedding images not working

Embedding images from a Google Drive doesn’t seem to be working. Does anyone know why?

I have the following post:

title: "Post 1"

# Post 1

## Image 1

## Image 2
{{< html >}}
<img src="https://drive.google.com/uc?export=view&id=1uEpd4IzXgwCzfxwivCTzbM5_ViMPLjZY">
{{< /html >}}

I have the following shortcode for the above mentioned html shortcode:


Repo: GitHub - jpnfighter/steve-site: hugo website

Not sure but isn’t that a link to the google driver viewer and not really an image?
This appears to be the image link, but whether that ever changes I don’t know.
And does show up ok…

What exactly did you type to get your result sorry?
I’ve tried to following and hasn’t worked:

![image]( https://doc-0o-0o-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/i50q5otnlb5pe6qdlf9gc0fl75qdrh8j/1688141400000/04330630498705347565/*/1uEpd4IzXgwCzfxwivCTzbM5_ViMPLjZY?e=view&uuid=1d07d099-1acf-48ad-894e-234a09c66e71)

## Image 2
{{< html >}}
<img src="https://doc-0o-0o-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/i50q5otnlb5pe6qdlf9gc0fl75qdrh8j/1688141400000/04330630498705347565/*/1uEpd4IzXgwCzfxwivCTzbM5_ViMPLjZY?e=view&uuid=1d07d099-1acf-48ad-894e-234a09c66e71">
{{< /html >}}

Now it doesn’t show up, I don’t think google drive likes being used like this!

1 Like


I used another way … to copy the external picture to my generates site under img/ext with a shortcode

title       = "external image"
## external image

{{< extpic  "https://gohugo.io/images/gohugoio-card-1.png" >}}

the shortcode

{{ $src := .Get 0 }}
{{ with resources.GetRemote $src }}
{{ with .Err }}
{{ warnf "%s" . }}
{{ else }}
{{ $url := urls.Parse $src }}{{ $path := urls.JoinPath  "img/ext" $url.Host $url.Path }}
{{ $img := .Content | resources.FromString $path }}
<img src="{{ $img.RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ end }}
{{ end }}


  • checks the external image during build


  • copy the image on every build to the local server


  • You could insert the image as data stream in the page without storing it as file.
    This could be a nice way for small images.
  • you can change the image size and quality
  • you can add a link to the original image


Unfortunately would be against the reason I’m wanting to have the images stored on a GDrive rather than the local server

You can shorten the shortcode :wink: or embedd it in a render-image template

1 Like

I’ve tested putting the following in a .html file and it all works and shows the image:

<img src="https://drive.google.com/uc?id=1uEpd4IzXgwCzfxwivCTzbM5_ViMPLjZY">

However, when I do the same thing in Hugo in a post.md, it doesn’t work for some reason:

{{< html >}}
<img src="https://drive.google.com/uc?id=1uEpd4IzXgwCzfxwivCTzbM5_ViMPLjZY">
{{< /html >}}

(I have a shortcode in themes\steve-theme\layouts\shortcodes\html.html which consists of:


(repo: GitHub - jpnfighter/steve-site: hugo website)

The image works for me. Here is a slightly modified version of your repo that you can download, extract and run hugo server, then open Post page. Filebin | kfm85d3m4vnn6gfq

That works thanks. I just also realized that it seems to be working on Edge and not on Firefox for some reason however. That seems a bit odd, perhaps one of my Firefox settings or just Firefox itself I’m not sure…

I am using Firefox and the image works fine.

1 Like

Must just be me

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.