Images are not loading in doks theme

I’m building a Hugo static documentation site using doks theme and having some issues in loading images in most of the pages. But the same image is working fine in the blog section.
I used below option to load images and the image is copied into the same directory as well.

![Test Image](data.png)

Image is working fine in the .md file preview but not rendering when I run the application.

This could be caused by many things.

You are more likely to receive a prompt and accurate response if you post a link to the public repository for your project.

See Requesting Help.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

I’ve uploaded the sample project in a repository in which I’ve added one image in the introduction page inside content/docs/prologue folder.

Image is showing correctly in the md file but not rendering when we run the project.

Repo path: GitHub - naveenjose555/hugo-sample

Thanks and Regards,
Naveen

The doks theme, buried deep in a Node.js module, includes an image render hook. This render hook expects the image to be either a global resource (in the assets directory, or a directory mounted to assets) or a page resource.

With your existing file structure…

content/docs/prologue/
├── commands.md
├── hugo.png    <-- page resource for _index.md, not for introduction.md
├── _index.md
├── introduction.md
└── quick-start.md

…the hugo.png image is neither a global resource nor a page resource for introduction.md.

Either move the image to the assets directory, or change your file structure to create a page bundle:

content/docs/prologue/
├── introduction/
│   ├── hugo.png  <-- page resource for introduction.md
│   └── index.md
├── commands.md
├── _index.md
└── quick-start.md