How to add picture in the repository

[lyctw]

Hi developers,

I don't want to rely on services like imgur to host my picture, I want these assets to be uploaded within the same repository. I've tried putting it under quartz/static/assets/my_picture.png and using link ![[/static/assets/my_picture.png]] in published website. It works while the local obsidian app cannot preview it.

Please tell me how to add a picture in the note. Thanks.

[saberzero1]

This plugin emits all non-Markdown static assets in your content folder (like images, videos, HTML, etc). The plugin respects the ignorePatterns in the global configuration

https://quartz.jzhao.xyz/plugins/Assets

The image has to be in your vault, not the assets folder. Quartz will automatically link to it.

Please make sure the link settings in Obsidian (in Settings > Files and Links > New link format) and Quartz (in quartz.config.ts) are identical. See below

• markdownLinkResolution: Sets the strategy for resolving Markdown paths, can be "absolute" (default), "relative" or "shortest". You should use the same setting here as in Obsidian
  • absolute: Path relative to the root of the content folder.
  • relative: Path relative to the file you are linking from.
  • shortest: Name of the file. If this isn’t enough to identify the file, use the full absolute path.

https://quartz.jzhao.xyz/plugins/CrawlLinks

// In quartz.config.ts
Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }), // or "absolute" or "relative", make sure to match Obsidian.

[lyctw]

Hi @saberzero1

Somehow shortest doesn't work and I changed it to relative, now it shows on both website and vault. Thank you! I'm closing the issue.

[sremedios]

Hi, I'm still having difficulty with exactly this. I have tried both shortest in Obsidian and Quartz as well as relative to no avail. Here's exactly what I'm doing:

1. I have a test page set up. I'm doing editing in Obsidian.
2. I take a screenshot and paste it in the test page in Obsidian.
3. Text updates render in localhost no problem, but i get a 404 link to the image

4. For all choices of shortest, relative, and absolute it doesn't work.

When I check the public folder, it looks like my image is not copied over. How should I fix this?

[saberzero1]

Hi, I'm still having difficulty with exactly this. I have tried both shortest in Obsidian and Quartz as well as relative to no avail. Here's exactly what I'm doing:

1. I have a test page set up. I'm doing editing in Obsidian.
2. I take a screenshot and paste it in the test page in Obsidian.
3. Text updates render in localhost no problem, but i get a 404 link to the image

4. For all choices of shortest, relative, and absolute it doesn't work.

When I check the public folder, it looks like my image is not copied over. How should I fix this?

Can you post a snippet of your test markdown file with the link to the image?

[sremedios]

Absolutely:

---
title: Introduction to Python
draft: false
tags:
  - tutorial
---

The rest of your content lives here. You can use **Markdown** here :)

![[brain.png]]

An image is above.

here's the webpage:

And here's the Obsidian screenshot:

And updated console log:

[sremedios]

Okay I consulted a friend and figured out my error.

Image assets should be in the content/ folder. I even put them in a subfolder content/assets and now it works just fine.

My final settings to make this work smoothly:

• Obsidian link path mode: shortest
• Quartz link path mode: shortest
• Created the directory content/assets; obsidian pasted links automatically go there now

[jackyzha0]

content should be the root of the vault not the quartz top-level folder