HTML img, video src="localpath" do not work in Reading view on mobile

Steps to reproduce

On mobile, create a HTML <img> tag in a note, such as

<img src="testimage.jpg"/>

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

Yes, I tested it in a new vault.

Expected result

Image displays in both Live preview, and reading view

Actual result

Image does not display in reading view (but works fine in live preview)

Environment

Summary

SYSTEM INFO:
Operating system: android 15 (samsung SM-X710)
Webview version: 140.0.7339.207
Obsidian version: 1.9.14 (242)
API version: v1.9.14
Login status: not logged in
Language: en
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none


Additional information

Screen recording of issue: https://file.garden/aN_BuhuSGyuztnmT/Screen_Recording_20251003_181650_Obsidian.mp4

Strange that it works in live preview. Does anything change if you use a full path?

1 Like

I tried these and they don’t even work in live preview.

<img src="file:///storage/emulated/0/Test/testimage.jpg"/>
<img src="/storage/emulated/0/Test/testimage.jpg"/>
<img src="/Test/testimage.jpg"/>

I confirmed my vault is actually located at /storage/emulated/0/Test, I copied the paths from a third party file explorer

Hmm, it may be that the approach I quoted only works on desktop. Mobile OSes can be funky with their file systems.

Just had a try with:

<img width="350" src="00 meta/01--assets/images/cat.png">

<video width="800" controls src="00 meta/01--assets/watering flowers.mp4">watering flowers</video>

Desktop:

  • Live preview :white_check_mark:
  • Reading view :white_check_mark:

Mobile (iOS):

  • Live preview :white_check_mark:
  • Reading view :cross_mark:



Possibly related:

Steps to reproduce

  1. Place any media into the Vault’s local directory (in this case - /static/tutorial/1.webp)
  2. Display it in any note using img tag:
<img src="/static/tutorial/1.webp" />
  1. Switch to Reading view (without Source mode)
  2. The media doesn’t show up
  3. Switch to Editing view (without Source mode)
  4. The media shows up correctly again

Did you follow the troubleshooting guide?

Yes.

Expected result

The media (that is stored locally) specified in the img tag displays correctly in Reading view.

Actual result

It shows the generic broken image icon and alt text (if there’s any)

Environment

(click to show)

SYSTEM INFO:
Operating system: android 13 (realme RMX3085)
Webview version: 140.0.7339.51
Obsidian version: 1.9.12 (237)
API version: v1.9.12
Login status: not logged in
Language: en
Live preview: on
Base theme: adapt to system
Community theme: none
Snippets enabled: 0
Restricted mode: on

RECOMMENDATIONS:
none


Additional information

The issue doesn’t apply to remotely accessed media:

File structure
1. Source view
2. Editing view (correct display)
3. Reading view (incorrect display)

I’ve made a new vault to showcase this bug, here it is if you want to reproduce: GitHub - v1s7/bug1: Obsidian vault with showcase of img tag related bug

I think it needs to be a file:// URL and to be either a full path from root of device or a relative one.

<img src="file:///home/v1s7/notes/static/tutorial/1.webp" />

But I vaguely recall seeing discussion of issues with displaying local images, so search the forum to check on that. (Also I think I recall Obsidian’s support for relative URLs may not be great.)

Steps to reproduce

<video width="800" controls src="attach/20250910212440.mp4"> Video cannot be displayed </video>

in preview mode

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

Y

Expected result

Can play video

Actual result

Environment

Android
Obsidian Mobile 1.9.14


Additional

There is no such problem on the PC,and Mobile Live edit mode