PaperMod doesn't display image

[MVP-Harry]

Hi,

I can't get my website to display images. Not sure if this is a bug. It would be highly appreciated if someone can help me. Sorry if this is noobish.

I have tried four ways to display the image:

1. Use absolute path to the file on my local computer (probably doesn't work)
2. Copy the file to the same directory as the document and use relative path (suggested by stackoverflow post)
3. Copy the file to /static/image/test_image.jpg
4. Upload it to an online hosting website, still doesn't work.

Result:

Thanks! :D

[nielsbrakel]

Can you share your project structure?

[MVP-Harry]

@nielsbrakel
.
├── archetypes
│   └── default.md
├── config.toml
├── content
│   ├── archives.md
│   └── posts
│   ├── Christmas Playlist.md
│   ├── Christmas Resolution.md
│   ├── Purpose of This Blog.md
│   └── test_image.jpg
├── data
├── layouts
│   └── partials
│   ├── extend_head.html
│   └── math.html
├── public
│   ├── 404.html
│   ├── archives
│   │   └── index.html
│   ├── assets
│   │   ├── css
│   │   └── js
│   ├── categories
│   │   ├── blog
│   │   ├── index.html
│   │   ├── index.xml
│   │   ├── music
│   │   └── plan
│   ├── images
│   │   ├── test_image.jpg
│   │   └── wp4575206-4k-galaxy-wallpapers.jpg
│   ├── index.html
│   ├── index.xml
│   ├── page
│   │   └── 1
│   ├── posts
│   │   ├── christmas-playlist
│   │   ├── christmas-resolution
│   │   ├── index.html
│   │   ├── index.xml
│   │   ├── math
│   │   ├── new_blog
│   │   ├── page
│   │   ├── purpose-of-this-blog
│   │   └── test_image.jpg
│   ├── README.md
│   ├── sitemap.xml
│   └── tags
│   ├── blog
│   ├── christmas
│   ├── hugo
│   ├── index.html
│   ├── index.xml
│   ├── music
│   ├── other
│   └── plan
├── resources
│   └── _gen
│   ├── assets
│   └── images
├── static
│   └── images
│   ├── test_image.jpg
│   └── wp4575206-4k-galaxy-wallpapers.jpg
├── structure.md
└── themes
└── PaperMod
├── assets
├── go.mod
├── i18n
├── images
├── layouts
├── LICENSE
├── README.md
└── theme.toml

44 directories, 31 files

[nielsbrakel]

I use the following folder structure:

├── content
│ ├── archives.md
│ └── category
│ │ ├── blog-a
│ │ │ ├── index.md
│ │ │ ├── picture.jpg
│ │ ├── blog-b
│ │ │ ├── index.md
│ │ │ ├── picture.jpg

And then in for example in blog-a I use the following markdown to show the image:

![Alt text of image](/category/blog-a/picture.jpg "Image title")

Keep in mind the path can differ when using multiple languages and or other baseUrl's. But hopefully this helps a little.

[akuzni2]

I'm also not able to display images.

I write my post as a markdown file and I include the image using a relative path. Using a markdown editor I am able to see the image.

However when I run Hugo to generate a static files it converts my site to HTML and it is not able to find the image.

My site structure is like

content/
-- posts/
-- -- mypost.md
-- -- image.jpg

when I run Hugo it puts mypost.md into a folder mypost/ with and index.html file inside. And the image.png is in the parent directory. Like so:

image.jpg
-- mypost/
-- index.hml

How do I configure papermod to correctly reference the image?

[akuzni2]

this worked for me https://stackoverflow.com/a/57129742/6393275

Unfortunately that means that I can't view the files in a markdown editor by referencing them like

![your image](/posts/image.jpg)

[Kreedzt]

temp fix: "../image.jpg", and i don't know why that path not correct

my structure:

content/
    posts/
        web/
            article.md
            images/
                a.png

my code in article.md:

![a](../images/a.png)

[MammothKan]

I have the same problem and I seem to find the cause and the solution.

Reason:
The markdown editor and the static file (HTML) have different reliant folders. The markdown editor is based on the 'content' folder, but the static file is based on the 'public' folder which is built when we run the 'hugo' command. When the post title is not 'index.md', the "Contents" folder and the "Public" folder are structured differently, so the image paths cannot be valid at the same time.

Solution:
Change the title of the post to 'index.md' and import the image using its relative path. It will work.
The structure of the 'content' folder:

|---content
|---|---posts
|---|---|---post_a
|---|---|---|---index.md
|---|---|---|---images
|---|---|---|---|---b.png

The structure of the 'public' folder:

|---public
|---|---posts
|---|---|---post_a
|---|---|---|---index.html
|---|---|---|---images
|---|---|---|---|---b.png

The relative path:

![b](images/b.png)

REFERENCE:
Image Processing

[eangutierrez]

Thank you so much for this post. My site looks great thanks to all of your help!

[AntonioBisconti]

I put image in static folder. I wrote this in mypost.md file ![test](/log.png), but doesen't render the image, why?

[foegra]

I place image to /static/images
this is how it works for me in *.md file:

![image-test](/../images/image.jpg)

[foegra]

Since I'm exporting from Obsidian - I've made the following markup file located here:

\layouts\_default\_markup\render-image.html

code looks like this:

<img src="/../images/{{ .Destination }}" alt="{{ .Text }}" />

original image link looks like this:

![image-test](image.jpg)

images are located here:

\static\images