Image Links with Local Images do not Function Correctly and are not Displayed Normally

[Enigma]

Steps to reproduce

You can create a folder with a file “local-blue.svg” in it, which you can download from Shields.io. Then, open the folder in Obsidian and create a Markdown file with the contents below:

[![Badge](local-blue.svg)](https://github.com)

[![Badge](https://img.shields.io/badge/web-blue)](https://github.com)

Hello [![Badge](local-blue.svg)](https://github.com)

Hello [![Badge](https://img.shields.io/badge/web-blue)](https://github.com)

- [![Badge](local-blue.svg)](https://github.com)
- [![Badge](https://img.shields.io/badge/web-blue)](https://github.com)

1. [![Badge](local-blue.svg)](https://github.com)
2. [![Badge](https://img.shields.io/badge/web-blue)](https://github.com)

# [![Badge](local-blue.svg)](https://github.com)

# [![Badge](https://img.shields.io/badge/web-blue)](https://github.com)

When you view it in “Reading View”, you will probably discover that the first and third link does not work, which indicates that image links with local images and without special formats do not function correctly.

What’s more, whatever their formats, local image links are not displayed normally, which is conspicuous compared to those with web images.

Did you follow the troubleshooting guide? [Y/N] Y

Expected result

Obviously, ten links to github.com.

Actual result

When you view it in “Reading View”, you will probably discover that the first and third link do not work, which indicates that image links with local images and without special formats do not function correctly.

What’s more, whatever their formats, local image links are not displayed normally, which is conspicuous compared to those with web images.

Environment

SYSTEM INFO:
Obsidian version: v1.6.7
Installer version: v1.6.7
Operating system: Windows 11 Pro 10.0.22631
Login status: not logged in
Insider build toggle: off
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none

---

Additional information

None

[harr]

I agree. This is unexpected behavior in Reading View. The test cases are valid CommonMark (see Example 517).

Here’s a screenshot comparing Source view, Reading view and Live Preview. I added numbers to each test case for easier comparison.

SYSTEM INFO:
	Obsidian version: v1.6.7
	Installer version: v1.6.5
	Operating system: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000 23.5.0
	Login status: logged in
	Catalyst license: supporter
	Insider build toggle: on
	Live preview: on
	Base theme: adapt to system
	Community theme: none
	Snippets enabled: 0
	Restricted mode: on

RECOMMENDATIONS:
	none

This is how Typora (left) and Marked (right) render the same file:

[Enigma]

I have discovered something more serious about this issue today.

If an image link, with a local image and without special formats, directs to a website, it will work only if you click on the link icon above it instead of the image. But if it directs to a local file, never will it work wherever you click on.

Create “example.txt” in the folder I mentioned before, and change the Markdown file into:

[![Badge](local-blue.svg)](https://github.com)

[![Badge](local-blue.svg)](example.txt)

[![Badge](https://img.shields.io/badge/web-blue)](https://github.com)

Hello [![Badge](local-blue.svg)](https://github.com)

Hello [![Badge](local-blue.svg)](example.txt)

Hello [![Badge](https://img.shields.io/badge/web-blue)](https://github.com)

- [![Badge](local-blue.svg)](https://github.com)
- [![Badge](local-blue.svg)](example.txt)
- [![Badge](https://img.shields.io/badge/web-blue)](https://github.com)

1. [![Badge](local-blue.svg)](https://github.com)
2. [![Badge](local-blue.svg)](example.txt)
3. [![Badge](https://img.shields.io/badge/web-blue)](https://github.com)

# [![Badge](local-blue.svg)](https://github.com)

# [![Badge](local-blue.svg)](example.txt)

# [![Badge](https://img.shields.io/badge/web-blue)](https://github.com)

Then you will notice the error in reading view.

[harr]

I agree. Something is weird. I simplified the test and added plain links for comparison. GIF shows Source, Reading and Live view:

[CoachKidd]

I found this thread while scratching my head trying to add a link to an image. It is not working despite all of the previous posts being closed.

I’m seeing the same behaviour described above …

[CoachKidd]

Why is this not getting more attention?

It’s a basic feature of HTML and any good information interface design.

[ClareMacrae]

Here is a local image, with a link - tested in Obsidian 1.7.7

[![[dsfdsfs - 2024-12-06 15-03-52.png]]](Inbox)

[CoachKidd]

GIVEN that the current context is set to the sandbox vault (Obsidian Version 1.7.7 (Installer 1.5.8))
WHEN the example code provided is pasted into a new note AND a test image (named dsfdsfs - 2024-12-06 15-03-52.png) is added to the vault
THEN the Obsidian UI renders the image as shown in the attached screenshot

This test is a fail.

The application behaviour is aligned with that described in the posts above.

[WhiteNoise]

There are at least two different bugs in this thread. I will break this thread into separate issues.

[CoachKidd]

Thanks for the support. Would you please post links to the new threads here, for those watching and future searches, please?

[WhiteNoise]

Continue here:

Reading: Embedded Local Images in external markdown links do not work properly

Minimum reproducible example: [](https://github.com) # [](https://github.com) [](https://github.com) Reading more result: [Obsidian_is7lWk2eYq] The link icon appears above (first case) or below (second case) the image. The image itself is not clickable (first case). External images in external links work properly (third case). Related to: Reading: Embedded Local Images to internal markdown lin…

Reading: Embedded Local Images to internal markdown links do not work properly

Minimum reproducible example: [](cat.md) # [](cat.md) [](cat.md) Reading more result: [Obsidian_CqGJYHIOGT] The link does not work in the first case. It works in the second case (link defined within a heading). Third case, external image in internal link, works properly all the time. Related to: Reading: Embedded Local Images in external markdown links do not work properly

Live Preview: Support clickable images in standard markdown links

Obsidian Live preview currently doesn’t support having clickable images in standard markdown links. With various degree of failure. Minimum Reproducible Example: [![[cat.webp|40]]](cat.md) [![[cat.webp|40]]](http://google.com) [](cat.md) [](http://google.com) Live preview result: [Obsidian_t5h5vRJwFH] Note that Obsidian’s wikilinks do not support at all image as links.

Support clickable images in (the alt text) of Obsidian's wikilinks

Use case or problem User wanted a clickable image that links to another note. (Example on the Discord) Example: [Peek 2021-08-03 18-41] Naive approach: [[Note to link to|![[image.png]]]] (Discord) Proposed solution Make that syntax functional. Current workaround (optional) # Click on image to get to a note [![[crazy-cool-cat.png]]](<Click on image to get to a note>) (Discord) Related feature requests (optional)