CSS snippet to display image from vault?

Things I have tried

I can use this snippet to display an image after a tag using an external image url

.tag[href="#iPhone"]:after {
  content: url(https://i.pinimg.com/originals/38/12/72/3812728fc9fdcecb67032fd2cf20788b.png);
}

What I’m trying to do

I would like to be able to reference an image from my vault’s attachment folder. Is this possible? This doesn’t work:

.tag[href="#iPhone"]:after {
  content: url(attachments/ios.png);
}

Hi.
I think you need to use a local url:

  1. via local url: file:///Users/.../attachments/ios.png
  2. via app url: app://local/%2FUsers%.... (use Dev. Tools to target the wanted image and copy the url in src… because spaces and “/” are replaced by “%2F” and similar)
  3. in content: url(app://local/%2FUsers%....)

The problem: if you move your file you need to change the url manually.

thanks, that all didn’t work for me.
But since I backup my vault to dropbox I could just share the file from there.
This is my code now that let’s me resize the image as well

.tag[href="#iPhone"]:after {  
  content: ' '; display:inline-block; 
  background-image: url(https://www.dropbox.com/s/i5qjtwf12kpx0oo/ios.png?raw=1);
  background-size:contain;
  height: 50px;
  width: 50px;
}

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.