如何通过CSS使自定义<app-icon>标签显示图片（无需JavaScript）

我有一个博客，希望创建子站点列出喜爱的应用。为保证代码一致性，避免与现有网站的标准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值存入根变量（此方法会显示图片链接文本），还有使用::before伪元素等，但均未达到预期效果。

当前未生效的代码 #

CSS代码 #

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

HTML代码 #

<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（考虑无障碍访问+个人偏好，避免混淆）
• 已在其他渠道咨询但未获得有效帮助
• 了解XML，希望该方案可复用至其他项目
• 浏览器为Firefox，其他浏览器也存在相同问题（非浏览器Bug，为个人CSS知识不足导致）
• 已知自定义标签仅默认支持id和class属性，因此使用了自定义的data-src属性
• 了解img标签默认CSS属性为inline-block，并已使用该属性

解决方案 #

你可以通过给<app-icon>的伪元素设置background-image结合attr()函数，同时明确伪元素的尺寸，就能实现显示图片的效果。修正后的CSS代码如下：

app-icon::before {
  content: '';
  display: inline-block;
  /* 根据需求设置固定尺寸，示例为48x48 */
  width: 48px;
  height: 48px;
  background-image: attr(data-src url);
  background-size: cover;
  background-position: center;
}

关键说明 #

• 伪元素的content必须设为空字符串，否则会显示图片链接文本
• 必须指定width和height，因为伪元素默认没有尺寸，背景图无法展示
• background-size: cover确保图片填满容器，避免拉伸变形
• background-position: center让图片在容器内居中显示

如果需要响应式的正方形图标，可以用aspect-ratio属性替代固定宽高：

app-icon::before {
  content: '';
  display: inline-block;
  width: 100%;
  aspect-ratio: 1/1; /* 保持正方形比例 */
  background-image: attr(data-src url);
  background-size: cover;
  background-position: center;
}

这样就能让<app-icon>标签正常显示对应图片，完全无需JavaScript，符合你的所有需求。

内容的提问来源于stack exchange，提问作者hacknorris