Image path in markdown files

Support
1

I’m using GitHub Pages for my repository’s website. I use zola build to build the website files to the docs folder in the repository. This approach is working fine, the GitHub repository is here and the website is viewable here. However, when I’m working on the website, zola serve does not render images defined in the markdown pages.

I have the base url in config.toml defined as
base_url = "https://gavinw.me/swift-macos"

Image files for the site are located in the static/img/ folder.

Markdown pages are located in the content/swiftui/ folder. For example, the markdown page located at content/swiftui/appstorage.md looks something like the following:

+++
title = "AppStorage"
date = 2022-11-13
+++

The `@AppStorage` property wrapper reads and writes values from user defaults. The example below saves a fruit name (a string) to the fruit key in user defaults. When the app is relaunched, the saved fruit name will be displayed in the text label. Enter a fruit in the text field then click the save fruit button to save a new fruit to the fruit key in user defaults.

<p><img src="/swift-macos/img/appstorage.png" style="max-width:400px;" alt="app storage property"></p>

The path for the image file src="/swift-macos/img/appstorage.png" must start with /swift-macos/ because that is where the repository resides on GitHub. If I use src="/img/appstorage.png" then zola serve will show the images but zola build does not have the proper path for the image files.

I tried using zola serve --base-url /swift-macos but I still have the problem of the images not being found in the markdown pages.

I also tried using the get_url() function but that seems to only work in template files.

<p><img src="{{ get_url(path='/img/appstorage.png') }}" style="max-width:400px;" alt="app storage property"></p>

So my question is, how can I use zola build and zola serve when the image path in markdown files is something like src="/swift-macos/img/appstorage.png" and the image files are located in the static/img/ folder?

1 Like
2

i found that zola serve does not actually “build”. its in memory. so images are not copied; .html files are not constructed.
Is it newly added images or existing ones.

3

This problem occurs with all images defined in the markdown files. I think the problem is that zola build uses absolute paths and zola serve uses relative paths.

4

sorry late reply. copying your md

<p><img src="{{ get_url(path='/img/appstorage.png') }}" 
         style="max-width:400px;" alt="app storageproperty"></p>`

  1. My console output Found usage of a shortcode named get_url but we do not know about

  2. the manual uses {% opposed to {{

  3. get_url is a tera template command and not a markdown command.

  4. i think you will find your html has the get_url string in the img src, such that. OR you haven’t updated your source due to an error!

<img src="{% get_url(path='/img/appstorage.png') %}" style="max-width:400px;" alt="app storage property">

you can put the path in the markdown or do the following

+++
title = "AppStorage"
date = 2022-11-13
[extra]
img = "/swift-macos/img/appstorage.png"
+++

and then in the template.html file

<p>
<img src=" {{site.base_url}}/{{ page.extra.img }}" style="max-width:400px;" alt="app storage property"></p>

or try the get_url in the template file.

5

Using <img src="{% get_url(path='/img/appstorage.png') %}" alt="app storage"> does not work in the markdown file.

6

get_url is a built-in function. You cannot directly use built-in functions directly from Markdown files.

If you want to use a built-in function like get_url from a Markdown file, you’ll need to use a shortcode.

For example, create PROJECT/templates/shortcodes/image.html with this inside:

{% set image_url = get_url(path=path) %}
<img src="{{ image_url }}">

Then you can use the shortcode in your Markdown file like this:

{{ image(path="/path/to/image.svg") }}

You can see that I’m using a regular path, which is not checked at build-time. The @ syntax would be nice to use, but I haven’t quite gotten it to work in the way I would like yet.