custom html tag as img tag - image not displayed

Question

i have a blog where i wanted to create a subsite listing my fav apps. for code consistency and for not confusing between existing html "normal" code describing website i made my own "subhtml" just for app cards. for now best i did to this code was to display texted source of image instead of image. all css i tried already: content: attr(data-src url), tried also attr both with url parameter and not, inside var()and not, also background-image: attr(data-src url), all max-width, max-height, width,height with both 100% and auto properties , attr value in root variable (this gives me text output of image i said above), tried also with ::before thing but also gives nothing special...

current not yet working code:

:root{
     --icon: attr(data-src); 
    }
    app-icon::before{
      display: inline-block;
      content: var(--icon);
    }

<app-box><app-title>app name</app-title><app-icon data-src="https://live.staticflickr.com/2552/3794648454_cf0c2a228b_b.jpg"></app-icon></app-box>

few additional notes:

• i don't want javascript (a11y)
• i don't want javascript (i dont like + confusing)
• yes i already was asking that in few places outside here but with no bigger help
• i know xml so i would like to use this also in few other projects too
• my browser is firefox but friends with other browsers also have this problem (so its not a browser bug, just my disknowledge of css)
• i know that custom tags doesnt have defined attributes except of id and class so i used custom one as was visible above =D
• i know default css property of img tag inline-block and im using it

screenshot of current bug :

this blog is under : https://hacknorris.neocities.org/app-store.html if someone would to test this bugg-css by themselves

so anyone knows how to display this image from custom tag?

Answer 1

The apparent problem of your code is setting the variable on the root-element. The root does not have the attribute "data-src", only the app-icon has. So you are looking for something like this:

app-icon {
  --icon: attr(data-src);
}

app-icon::before {
  display: inline-block;
  background-image: url(var(--icon));
  width: 100px;
  height: 100px;
  content: '';
}

But well, this doesn't work. You can't have variable URL tokens.

But you cannot do this with url(), as url(var(--url)) is parsed not as a url( function token followed by var(--url) followed by a ), but a single url() token that is invalid because the var(--url) is being treated as a URL itself, and unquoted URLs in url() tokens cannot contain parentheses unless they are escaped. This means the substitution never actually occurs, because the parser never sees any var() expressions in the property value — indeed, your background declaration is completely invalid.

(From https://stackoverflow.com/a/42331003/6336728)

What you can do is put the URL in inline CSS:

<app-box>
  <app-title>app name</app-title>
  <app-icon style="--icon: url(https://live.staticflickr.com/2552/3794648454_cf0c2a228b_b.jpg)"></app-icon>
</app-box>

I don't think that's the best solution though. What are your goals of using this method? I think it would be much better to just do it the usual way and use picture/source/img tags. This way you can make your images responsive (https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction)

Answer 2

I'm afraid it's not possible to do just with css. You should have do something like: content: url(var(--icon)) but this won't work. Anyway you're trying to get value from data-href attribute but in your html code you have data-src