Vue.js styl powiązania danych backgroundImage nie działa

Próbuję powiązać src obrazu w elemencie, ale wygląda na to, że nie działa. Otrzymuję komunikat „Nieprawidłowe wyrażenie. Wygenerowana treść funkcji: {backgroundImage: {url (obraz)}”.

Dokumentacja mówi użyć „Kebab-przypadek” lub „wielbłądziej sprawę”.

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

Oto skrzypce: https://jsfiddle.net/0dw9923f/2/

Problem polega na tym, że wartość for backgroundImagemusi 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:stylejest 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 imagewartość 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?

<div :style="{'background-image': 'url(' + require('./assets/media/img.jpg') + ')'}"></div>

Inne rozwiązanie:

<template>
  <div :style="cssProps"></div>
</template>

<script>
  export default {
    data() {
      return {
        cssProps: {
          backgroundImage: `url(${require('@/assets/path/to/your/img.jpg')})`
        }
      }
    }
  }
</script>

Co sprawia, że ​​to rozwiązanie jest wygodniejsze? Po pierwsze, jest czystszy. A potem, jeśli używasz Vue CLI (zakładam, że tak), możesz załadować go za pomocą webpacka.

Uwaga: nie zapominaj, że require()jest to zawsze względne w stosunku do ścieżki bieżącego pliku.

<div :style="{ backgroundImage: `url(${post.image})` }">

istnieje wiele sposobów, ale uważam, że ciąg szablonów jest łatwy i prosty

Wiązanie stylu obrazu tła przy użyciu wartości dynamicznej z pętli v-for można zrobić w ten sposób.

<div v-for="i in items" :key="n" 
  :style="{backgroundImage: 'url('+require('./assets/cars/'+i.src+'.jpg')+')'}">
</div>

W przypadku pojedynczego powtarzalnego komponentu ta technika działa dla mnie

<div class="img-section" :style=img_section_style >

computed: {
            img_section_style: function(){
                var bgImg= this.post_data.fet_img
                return {
                    "color": "red",
                    "border" : "5px solid ",
                    "background": 'url('+bgImg+')'
                }
            },
}

Wypróbowałem @david answer i nie rozwiązało to mojego problemu. po wielu kłopotach stworzyłem metodę i zwróciłem obraz ze stylem string.

Kod HTML

<div v-for="slide in loadSliderImages" :key="slide.id">
    <div v-else :style="bannerBgImage(slide.banner)"></div>
</div>

metoda

bannerBgImage(image){
    return 'background-image: url("' + image + '")';
},

Wystąpił problem polegający na tym, że obrazy tła ze spacjami w nazwie pliku powodowały, że styl nie był stosowany. Aby to naprawić, musiałem upewnić się, że ścieżka ciągu została ujęta w pojedyncze cudzysłowy.

Zwróć uwagę na znak ucieczki \ 'w moim przykładzie poniżej.

<div :style="{
    height: '100px',
    backgroundColor: '#323232',
    backgroundImage: 'url(\'' + event.image + '\')',
    backgroundPosition: 'center center',
    backgroundSize: 'cover'
    }">
</div>

Zaakceptowana odpowiedź nie wydawała się rozwiązać problemu za mnie, ale tak się stało

Upewnij się, że deklaracje backgroundImage są zawarte w adresie URL (i cudzysłowach, aby styl działał poprawnie, niezależnie od nazwy pliku.

Styl ES2015:

<div :style="{ backgroundImage: `url('${image}')` }"></div>

Lub bez ES2015:

<div :style="{ backgroundImage: 'url(\'' + image + '\')' }"></div>

Źródło: vuejs / vue-loader numer 646