自定义 html 标签作为 img 标签 - 图像不显示

Question

我有一个博客，我想在其中创建一个子网站来列出我最喜欢的应用程序。 为了代码的一致性，并且为了不混淆现有的 html 描述网站的“正常”代码，我为应用程序卡片制作了自己的“subhtml”。 现在我对这段代码所做的最好的事情是显示图像的文本源而不是图像。 所有 css 我已经尝试过： content: attr(data-src url) ，也尝试过使用 url 参数而不是在var()内部而不是background-image: attr(data-src url) ，所有max-width , max-height , width , height具有100%和auto属性，根变量中的attr值（这给了我上面说的图像的文本 output），也尝试了::before thing 但也没有什么特别的......

当前尚未工作的代码：

 :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>

一些额外的注意事项：

• 我不要 javascript (a11y)
• 我不想要 javascript（我不喜欢 + 令人困惑）
• 是的，我已经在外面的几个地方问过这个问题，但没有更大的帮助
• 我知道 xml 所以我也想在其他几个项目中使用它
• 我的浏览器是 firefox 但其他浏览器的朋友也有这个问题（所以这不是浏览器错误，只是我对 css 的了解）
• 我知道自定义标签没有定义的属性，除了 id 和 class 所以我使用了上面可见的自定义标签 =D
• 我知道 img 标签inline-block的默认 css 属性并且我正在使用它

当前错误的屏幕截图：

此博客位于： https://hacknorris.neocities.org/app-store.html如果有人想自己测试这个 bugg-css

所以有人知道如何从自定义标签显示此图像吗？

Answer 1

您的代码的明显问题是在根元素上设置变量。 根没有属性“data-src”，只有应用程序图标有。 所以你正在寻找这样的东西：

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

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

但是，这行不通。 您不能拥有变量 URL 令牌。

但是您不能使用 url() 执行此操作，因为 url(var(--url)) 被解析为不是 url（function 标记后跟 var(--url) 后跟 a ），而是单个 url() 标记无效，因为 var(--url) 本身被视为 URL，并且 url() 标记中未加引号的 URL 不能包含括号，除非它们被转义。 这意味着替换从未真正发生，因为解析器从未在属性值中看到任何 var() 表达式——实际上，您的背景声明是完全无效的。

（来自https://stackoverflow.com/a/42331003/6336728 ）

您可以做的是将 URL 放入内联 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>

我不认为这是最好的解决方案。 您使用此方法的目标是什么？ 我认为以通常的方式使用 picture/source/img 标签会更好。 这样你就可以让你的图像响应（ https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction ）

Answer 2

恐怕只用 css 是不可能的。你应该做类似的事情： content: url(var(--icon))但这行不通。 无论如何，你试图从 data-href 属性中获取值，但在你的 html 代码中你有 data-src