Guys why does the image class not working?
<img class="green">![[Image.png]]</img>
and in CSS:
img.green{
filter:hue-rotate(90);
}
It is funny, it will just create this additional horizontal line, show the picture, but with no hue change.
Can you use developer tools to inspect the resulting HTML? I’m curious about what the rendered output looks like in raw HTML.
<img> tags can’t be wrapped in this way. What you will get is two <img>, one after the other.
The only way I can think of to make this work would be to use a different wrapping element, like a <div>.
<div class="green">![[Image.png]]</div>
And then update your CSS:
div.green img {
filter:hue-rotate(90);
}
1 Like
This is not working.
Image is not generated. It is there just as an text:
![[Image.png]]
Ah, you’re right. Sorry about that. I’m not sure there is a good solution for this. If the image was publicly hosted, you could do <img class="green" src="/path/to/file"/>. You could create a feature request.
I would still be curious about the actual HTML rendering. What’s happening (or not) on the HTML level that’s causing this to fail? Is the class target not being picked up, is the image not receiving the hue…?
It’s being rendered as two consecutive images. The first gets the class and the second is the embedded image.
1 Like
Oh, I see. Is that true if you use conventional Markdown image syntax? ?
Yes, same result. The issue is you can’t wrap the <img> tag.
So the OP’s original:
<img class="green">![[Image.png]]</img>
is being rendered as
<img class="green"/>![[Image.png]]
It is being rendered as simple text, not as Image object:
<img class="green"/>![[Image.png]]
What I meant was two <img> elements are rendered. It’s just that the first one doesn’t have a src attribute so there’s no image to show.
So this is bug, right?
I think it’s a feature request - to be able to pass html classes or formatting options to embedded images.
But the whole app is HTML and CSS this should work by default 
From high altitude, sure.
@sam.baron does an existing feature request for this exist? I think I’ve seen something relevant but I’m not sure I’m understanding the issue deeply enough.
I looked for a feature request for image formatting, but couldn’t find one. I know there have been discussions on Discord about it.
It would be nice if Obsidian operated more like Typora, where you can reference relative paths to files like this:
or
<img src="..\path\to\image.png" alt="My Image" style="zoom:50%;" />
There is a feature request for this: https://forum.obsidian.md/t/relative-paths-to-unrecognized-file-types-in-the-vault/4251
For me the better is the use:
![[Image]]
and handle it internally as it is
<img src="..\path\to\image.png"</img>
Then we can add any class before the image.
a very hacky workaround would be to just add a div with a specific class right before(with no lines in between) the ![[image.png]] and use the selector .cm-html-embed:has(<your-class>) + .media-embed > img its ugly but it works