class={`bg-[length:100%] bg-center bg-no-repeat md:bg-[length:75%] bg-["url(${MLogoGray.src}")]`}
>```
Why does Astro not like me using template literal strings like this#Template literal strings in Astro
mint sundial
gritty stumpBOT
Hi @mint sundial. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Astro supports the use of template literals in attribute values, but there are some limitations. According to the Astro documentation (https://docs.astro.build/en/basics/astro-syntax#dynamic-attributes), local variables can be used in curly braces to pass attribute values to both HTML elements and components. However, HTML attributes will be converted to strings, so it is not possible to pass functions and objects to HTML elements.
In your case, the issue might be related to the use of the $ symbol in your template literal. There was a reported bug (https://github.com/withastro/astro/issues/2094) in Astro where the use of a simple $ in a template string caused an error. This might be affecting your code as well.
Here's an example of how you can use template literals in Astro:
---
const name = "Astro";
---
<h1 class={name}>Attribute expressions are supported</h1>
<MyComponent templateLiteralNameAttribute={`MyNameIs${name}`} />