Twig function to find and replace Obsidian image link syntax

[rafic20]

Hi, I'm using the markdown app Obsidian as a front-end for my web site content. Obsidian is pointed to my content folder in my Pico setup. Any MD files I create in Obsidian with YAML are immediately viewable in a browser. I am using the standard folder structure in Pico.

The issue I have is that there is a slight difference in how Obsidian handles image markup vs Pico:

Pico Image link

![Image Title](%assets_url%/image.png)

Obsidian

![](assets/image.png)

If I try to load a web page, the image doesn't load because it's not using %assets_url% variable, and Pico thinks the image is located at content/subfolder/assets/image.png

Is there a Twig function I can use to find the following string in my pages:

![[assets/

and replace it with:

![[%assets_url%/

That would solve my linking issue. Thanks very much!

[PhrozenByte]

Yes, try Pico's url Twig filter, e.g. {{ meta.image|url }}.

As an alternative you could also add a <base> HTML tag (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) to your base template to tell your webbrowser how it should handle relative URLs like assets/image.png.

[rafic20]

Thanks for your response!

I tried this in my header.twig and it worked!

<base href="http://localhost:8888/pico-mysite/" target="_self">

I can now see ObsidianMD image links that are inline in my MD file.

I thought about adding all the inline image links to meta.imgOne, meta.imgTwo fields in the YAML, and displaying them with inline markup %meta.*% -, but that was a bit of a hassle, as I don't think Pico supports nested YAML.

Thanks for your help!