Closed peanball closed 8 months ago
As noted in the code, CSS does not allow converting attributes to URLs.
When putting image URLs into properties (and thus attributes), the URL could so far only be something starting with http.
http
By adding support for data URLs, e.g. images and SVGs can now be added directly as property value and used as URL, e.g. for CSS background-image:.
background-image:
Example property:
--- photo: data:image/jpeg;base64,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 ---
Cool idea! Thanks for the contribution.
As noted in the code, CSS does not allow converting attributes to URLs.
When putting image URLs into properties (and thus attributes), the URL could so far only be something starting with
http
.By adding support for data URLs, e.g. images and SVGs can now be added directly as property value and used as URL, e.g. for CSS
background-image:
.Example property: