Problem polega na tym, że wartość for backgroundImage
musi być ciągiem takim jak ten:
<div class="circular" v-bind:style="{ backgroundImage: 'url(' + image + ')' }"></div>
Oto uproszczone skrzypce, które działają: https://jsfiddle.net/89af0se9/1/
Odp .: komentarz poniżej o skrzynce na kebab, tak możesz to zrobić:
<div class="circular" v-bind:style="{ 'background-image': 'url(' + image + ')' }"></div>
Innymi słowy, wartość for v-bind:style
jest zwykłym obiektem JavaScript i podlega tym samym regułom.
AKTUALIZACJA: Jeszcze jedna uwaga dotycząca powodów, dla których możesz mieć problemy z uruchomieniem tego.
Powinieneś upewnić się, że twoja image
wartość jest cytowana, tak aby końcowy wynikowy ciąg to:
url('some/url/path/to/image.jpeg')
W przeciwnym razie, jeśli adres URL obrazu zawiera znaki specjalne (takie jak spacje lub nawiasy), przeglądarka może nie zastosować go poprawnie. W Javascript przypisanie wyglądałoby następująco:
this.image = "'some/url/path/to/image.jpeg'"
lub
this.image = "'" + myUrl + "'"
Technicznie rzecz biorąc, można to zrobić w szablonie, ale ucieczka wymagana do zachowania prawidłowego kodu HTML nie jest tego warta.
Więcej informacji tutaj: Czy cytowanie wartości url () jest naprawdę konieczne?
backgroundImage
), a nie skrzynka kebab (background-image
), mimo że doktorzy twierdzą, że może być.