Image placement

This guide explains where to store image resources and how to reference them. You can store images as page, section, global, or remote resources.

Page resource#

A page resource is a resource in the current page bundle. A page bundle is a directory with an index.md or _index.md file at its root.

content/
└── posts/
    └── post-1/         # page bundle
        ├── index.md
        └── bird.jpg    # page resource

Reference#

To display a page resource image, use the relative path:

bird.jpg

Section resource#

A section resource is a resource in the current section.

content/
└── posts/
    ├── bird.jpg        # section resource
    └── post-1.md

Reference#

To display a section resource image, use the relative path:

bird.jpg

Global resource#

A global resource is a resource in the assets directory, or within any directory mounted to the assets directory.

assets/
└── images/
    └── bird.jpg    # global resource

Reference#

To display a global resource image, use the relative path:

images/bird.jpg

Remote resource#

A remote resource is a resource on a remote server, accessible via HTTP(S).

Reference#

To display a remote resource image, use the URL:

https://images.unsplash.com/photo-1690198517569-45458a850563?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80