Image is not shown or broken on webpage

I am building a static website using the “cupper” theme.
Some of my markdown contents include images which are from another website (https URL) or local directory. I used the markdown grammar !()[] to include the image. The code worked well in the markdown editor (i.e. Atom). However, when I see my website, the image from another website survived only; the ones from my local directory are not shown.
After exploring the cupper theme hompage, I understand that this theme uses a shortcode named figureCupper to call images:

{{< figureCupper
img="sun.jpg" 
caption="The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. [Credits](https://images.nasa.gov/details-GSFC_20171208_Archive_e000393.html)." 
command="Resize" 
options="700x" >}}

I applied the example code and modified the name of my figure only, but this failed to build the site and raised an error:

Rebuild failed:

"C:\Users\Owner\Dropbox\bloght-hugo\content\post\20160628_서민적 글쓰기.md:36:1": failed to render shortcode "figureCupper": failed to process shortcode: "C:\Users\Owner\Dropbox\bloght-hugo\themes\cupper-hugo-theme\layouts\shortcodes\figureCupper.html:14:21": execute of template failed: template: shortcodes/figureCupper.html:14:21: executing "shortcodes/figureCupper.html" at <$original.Resize>: nil pointer evaluating resource.Resource.Resize

I also found that Hugo provides a default shortcode named figure I tried to apply this shortcode. At this time, the image appeared at the right location, but it was broken, showing this image.

How can I include images to my posts via any ways such as the markdown grammar or other hugo shortcodes?

@zwbetz

This is hard to debug without seeing your code. Can you share it?

Ok. My github repository for the site is here.

I am sorry. I didn’t realize that the themes/cupper-hugo-theme folder of my github repository is linked to your repository.
I have copied the structure of the themes/cupper-hugo-theme folder to the root directory of the bloght-hugo repository (and I pulled your master branch to my cupper-hugo-theme folder to keep the original theme code).
As I remember, I modified the followings:

  • default.md of archetypes
  • partials\footer.html (for google analytics and dark/light button)
  • partials\nav.html (dark/light button)
  • _default\list.html (to modify date/time format)
  • post\single.html (to modify date/time format)
  • partial/disqus.html (to replate disqus with utterances)
  • partial/header.html (for google analytics)

Please check my code.

Getting a chance to look at this again. Which of your posts in particular is having the issue?

All the posts that contain local images. For instance, the two recent posts about google analytics and utterances are the ones.

In the post about utterances, there is a code box above the references header. And a text line follows the box. There is an image below the text line, but is now shown. This is an example and there are actually many images in the post.

On the other hand, old posts start with an image of a book. This is not a local image but is included by using https url.

Let me know if additional information is needed.

Sincerely

Hoontaek Lee

2020년 1월 5일 (일) 오전 10:54, Zachary Betz via Hugo gohugo@discoursemail.com님이 작성:

I think I see your issue. The reason your markdown image previews work in GitHub is because the paths are correct.

But the image paths may be different on your deployed site, depending in how you have permalinks configured.

You could also try moving your images to the static directory. They will then be copied to the root of your site when it’s generated.

Thank you for your response.

My permalinks in the config.yaml file is:

permalinks: post: /:filename/

Based on your last response, I tried the followings which did not work either:

  1. move all images to static folder and change the address in markdown from “” to “/static/image_root/image_name.jpg” or
    “static/image_root/image_name.jpg”

  2. change the current address of images in markdown files to ones of github repository such as “https://github.com/hoontaeklee/bloght-hugo/blob/master/content/post/20200101_add_utterances/20200101_add_utterances_fig1.jpg

I will find other ways. Please let me know when you have any idea.

2020년 1월 6일 (월) 오전 2:22, Zachary Betz via Hugo gohugo@discoursemail.com님이 작성:

I seem to solve this issue (it works!).

The solution is omitting the first folder below the root directory of my local blog repository.

For example, if my image A.jpg has address of blogRoot/static/images/A.jpg, then when I refer to the address in markdown file, I should omit the root and the next folder like this: /images/A.jpg ("/" at the first should not be omitted). Likewise, if my image article_B.jpg's address is blogRoot/content/post/article_B/B.jpg, then I can refer the address in markdown like: /post/article_B/B.jpg

But I do not know why this way work correctly. If you know the reason, please let me know.

1 Like

Forgive me if I’m being difficult to understand. The English is NOT my native language. :stuck_out_tongue:

Because, the posts are relative to the root of your website.

When you use Hugo with the option --server, as a server to create your files, Hugo considers the folder content as the root. It knows that if there’s files image into static/images, it must bind as-is.

When you publish with hugo command, all datas are writed on public folder. This on becomes the root, within which folders posts, images and others are at the same level.

Do you mean that after serving Hugo website using commands such as hugo -t <theme_name>, the directories right below the original root folder (e.g. static, content, etc.) become a new root?

Option -t is just to specify one theme. You can use it even with option --server.

When you serve hugo, with or without option other than --server, all datas are correctly rewrite into public folder, as exemple:

public/
   css/
       file.css
   images/
       img-x.ext
       img-y.ext
   js/
       file.js
   posts/
       article1/
           index.html
       article-n/
           index.html
           img.ext
(...)

all you have to do is to publish this root on your webhosting!


But, as long time you use Hugo as server, the:
=> folders css, js and images (the name can be too: img) are into folder static.
=> folder posts is into folder contentHugo considers this folder as the root of your site on localhost.
etc.


I can’t think/see of a better way to help you! :wink:
Maybe I’m wrong :stuck_out_tongue:

1 Like

Thank you. Your answer looks correct for me.

1 Like