Синтаксис или как правильно?

Question

[Morfeey]

Имеем реактивный объект, который пытаемся привязать к шаблону и задать стили:

<div v-for="Avatar in items.Avatars" class='cc-avatar-on-list flex flex-center align-items-center''>
                    <div class='cc-avatar-list-icon' v-bind:style="{ background-image: url(Avatar.ClassIcon) }"></div>
                    <div class='flex align-items-center'>
                        <p class='cc-avatar-name-on-list'>{{Avatar.AvatarName}}</p>
                        <p class='cc-avatar-gearscore-on-list'>{{Avatar.GearScore}}</p>
                    </div>
                </div>

В итоге имеем ошибку:

- invalid expression: missing : after property id in

    { background-image: url(Avatar.ClassIcon) }

  Raw expression: v-bind:style="{ background-image: url(Avatar.ClassIcon) }"

После попробовал так:

v-bind:style="{ 'background-image': url(Avatar.ClassIcon) }" // Ругается на отсутствие функции url()
v-bind:style="{ 'background-image': 'url(Avatar.ClassIcon)' }" // Результат: просто текст.

А также пробовал экранирование кавычек.
Но в итоге так и не добился требуемого результата.

Answer 1

[Anton Filippov]

<div class="circular" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>

этот запрос было несложно ввести в поисковик

Answer 2

[0xD34F]

<div :style="{ 'background-image': `url(${Avatar.ClassIcon})` }"></div>

Answer 3

[andrpushilin]

Имя класса содержит знак "-", поэтому его нужно взять в кавычки

<div class='cc-avatar-list-icon' v-bind:style="{ 'background-image': 'url('+Avatar.ClassIcon+')' }"></div>