Атрибуты из значений

Фигурные скобки работают и в атрибутах. Тогда вместо текста в кавычках атрибут получает значение выражения:

export default function App() {
    const festival = "Летние звуки";
    const poster = "/react.svg";

    return (
        <header>
            <img src={poster} alt={`${festival} — афиша`} />
            <h1>{festival}</h1>
        </header>
    );
}

Изображение получит src="/react.svg" и alt="Летние звуки — афиша". Здесь пригодится шаблонная строка: атрибут принимает одно выражение, поэтому, чтобы составить его значение из переменной и текста, запишите его в обратных кавычках.

Скобки пишите без кавычек вокруг. src="{poster}" — это обычный текст, поэтому изображение будет искать файл с именем {poster} и не покажется.

Атрибуты с неизменным текстом остаются в кавычках, как в HTML: alt="Логотип". Скобки нужны, когда значение берётся из вашего кода.