Image alt text not shown on internal embedded images, only on some external embedded

Bug reports
,
#1

Steps to reproduce

Use the following note and image file to reproduce (in the help vault):

---
date: 2021-08-02
---

# Test image alt text

_Internal_ image embeds _don’t_ show alt text, _external_ embeds _do_, but only if using the `![](uri "text")` notation (last two).

### Internal

![[crazy-cool-cat.png]]
![[crazy-cool-cat.png|Crazy Cool Cat]]

![](Attachments/crazy-cool-cat.png)
![Crazy Cool Cat](Attachments/crazy-cool-cat.png)
![](Attachments/crazy-cool-cat.png "Crazy Cool Cat")
![Crazy Cool Cat 1](Attachments/crazy-cool-cat.png "Crazy Cool Cat 2")

### External

![](https://freesvg.org/storage/img/thumb/crazy-cool-cat-2015041430.png)
![Crazy Cool Cat](https://freesvg.org/storage/img/thumb/crazy-cool-cat-2015041430.png)

<!-- Only these last two show an alt text on hover -->
![](https://freesvg.org/storage/img/thumb/crazy-cool-cat-2015041430.png "Crazy Cool Cat")
![Crazy Cool Cat 1](https://freesvg.org/storage/img/thumb/crazy-cool-cat-2015041430.png "Crazy Cool Cat 2")

crazy-cool-cat

Expected result

All embedded images showing the alt text on hovering.

Actual result

  • None if the images embedded from the vault display an alt text on hover.
  • Only 2 of 4 variants of the external embeds show an alt text on hover. (The last two.)

Environment

  • Operating system: Linux Mint 20.2 and other Linuxes
  • Obsidian version: 0.12.10, installer 0.12.10

Additional information

Screenshots from the help vault, switched to light mode so the images can be seen.

1_081
1_0811920×1200 297 KB

1_082
1_0821920×1200 282 KB

`alt` tag section ignored for local image embeds
#2

Steps to reproduce

Make a document with ![Alt text goes here](test.jpg) in it, and include a test.jpg in the same folder.

Expected result

The following rendered HTML:

<div class="markdown-preview-section">
    <div class="internal-embed is-loaded" src="test.jpg">
        <img alt="Alt text goes here" src="app://local/C:%5Csomevault%5Ctest.jpg">
    </div>
</div>

Actual result

The following rendered HTML:

<div class="markdown-preview-section">
    <p></p>
    <div class="internal-embed is-loaded" src="test.jpg">
        <img alt="test.jpg" src="app://local/C:%5Csomevault%5Ctest.jpg">
    </div>
    <p></p>
</div>

Note that the alt text appears nowhere in the output, and the alt attribute on the img is just the name of the file. Notably, the [alt text] works fine for embeds to externally linked images.

Environment

  • Operating system: Windows 10 Pro Build 18363
  • Obsidian version: v0.8.2

Additional information

I’m trying to add css styles to embedded local images, using markdown syntax, utilizing alt text like this:

![alt text goes here -customstyle](thefile.jpg)

And CSS3 substring selectors like so:

img[alt$="-customstyle"] { ... }

If there’s an easier way to add css styles to individual images without resorting to using raw HTML, please let me know.

1 Like