如何用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作為組件的屬性傳入，這樣代碼結構會更加清晰和易于維護。