如何用CSS伪元素显示与元素属性avatar-url关联的图片？

利用css伪元素显示与元素属性关联的图片

很多时候，我们需要根据元素的属性值动态地渲染一些内容，例如根据一个URL属性显示对应的图片。本文将探讨如何利用css伪元素以及元素属性avatar-url来实现这一目标。

问题描述如下：假设我们有一个元素，它拥有一个名为avatar-url的属性，该属性的值是一个图片的URL。我们希望通过CSS伪元素，在该元素旁边显示由avatar-url属性指定的那张图片。

最初尝试的代码如下：

#my-element::before {     content: url(attr(avatar-url)); }

然而，这种方法是无效的。

立即学习“前端免费学习笔记（深入）”；

这是因为attr()函数在content属性中使用时，其功能受到限制。早期的attr()函数多范围应用的草案已经被废弃，它现在只能在content属性中直接使用，而不能再用url()函数进行包裹。

因此，url(attr(avatar-url))这种写法无法正确解析avatar-url属性的值并将其作为图片URL。

一种可行的替代方案是使用内联样式和背景图片：直接在元素上使用style=”background-image:url(xxx)”，然后通过CSS调整背景图片的偏移位置，并使用伪元素设置合适的宽高来承载背景图片。这种方法能够达到相同的效果。

另一种更推荐的方式是创建自定义组件，例如组件，将url作为组件的属性传入，这样代码结构会更加清晰和易于维护。