0

I am using the following code {{< figure src="../img/img.png" title="the image title" >}} to display image on hugo website and it works fine. I found this piece of code from: Add image to webpage which uses hugo framework

Now I wanted to do some image processing and was using the following link: https://gohugo.io/content-management/image-processing/

I was trying to use the following lines of code:

{{ $image := resources.Get "images/sunset.jpg" }}

{{ $image := resources.GetRemote "https://gohugo.io/img/hugo-logo.png" }}

For first line in above code, the folder structure is as follows. Inside the blog-code(root folder) I created assets/images, with sunset.jpg inside. It does not work i.e. image is not displayed on the page.

Folder Structure

blog-code/assets/images/sunset.jpg

The second line in above code is fetching a remote image. It also does not work.

I have tried following link, Processing images in Hugo, and few other links but not able to solve the issue.

Please guide, where I am getting wrong.

Thanks.

Naresh Chaurasia
  • 419
  • 5
  • 21

2 Answers2

1

It does not work i.e. image is not displayed on the page.

This code:

{{ $image := resources.Get "images/sunset.jpg" }}

does not display an image, it only sets the variable $image.

Mr. Hugo
  • 11,887
  • 3
  • 42
  • 60
1

{{ $image := resources.Get "images/sunset.jpg" }} <- you're getting the image resource and assigning to a variable

<img src="{{$image.Permalink}}"> <- now you are giving the image resources URI to the src attribute

You're referenced link DOES show this exact pattern.

Reading the Hugo Docs for Image processing: https://gohugo.io/content-management/image-processing/#readout

Seems like what you need so you do not fall prey to misunderstanding.

Rogelio
  • 910
  • 5
  • 14
  • When i make use of `{{ $image := resources.Get “images/sunset.png” }}` , it shows up as in the following link: https://naresh-chaurasia.github.io/connect2naresh/experiments/ I am new to hugo and not sure if anything else is required to make it work. – Naresh Chaurasia Apr 02 '22 at 03:51
  • Literally input: {{ $image := resources.Get "images/sunset.jpg" }} – Rogelio Apr 02 '22 at 04:46
  • I have checked in the entire code here: https://github.com/Naresh-Chaurasia/blog-code-git – Naresh Chaurasia Apr 04 '22 at 02:35
  • I tried a number of things. It seems like `` tag is not working. I have checked in the code at the above link. – Naresh Chaurasia Apr 04 '22 at 10:32
  • The problem was happening as hugo was not parsing html tags. Please refer to following link for more details: https://stackoverflow.com/questions/60329235/blogdown-and-hugo-not-parsing-html-tags-in-markdown I added following code to `config.toml` and now it is showing images. ```[markup.goldmark.renderer]unsafe = true``` – Naresh Chaurasia Apr 04 '22 at 12:20