Vue.js data-bind style backgroundImage non funzionante

Sto cercando di legare lo src di un'immagine in un elemento, ma non sembra funzionare. Ricevo "Espressione non valida. Corpo della funzione generato: {backgroundImage: {url (image)}".

La documentazione dice di usare "Kebab-case" o "camel-case".

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

Ecco un violino: https://jsfiddle.net/0dw9923f/2/

Il problema è che il valore per backgroundImagedeve essere una stringa come questa:

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

Ecco un violino semplificato che funziona: https://jsfiddle.net/89af0se9/1/

Re: il commento qui sotto su kebab-case, ecco come puoi farlo:

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

In altre parole, il valore per v-bind:styleè solo un semplice oggetto Javascript e segue le stesse regole.

AGGIORNAMENTO: Un'altra nota sul motivo per cui potresti avere problemi a farlo funzionare.

Assicurati che il tuo imagevalore sia tra virgolette in modo che la stringa finale risultante sia:

url('some/url/path/to/image.jpeg')

In caso contrario, se l'URL dell'immagine contiene caratteri speciali (come spazi o parentesi), il browser potrebbe non applicarlo correttamente. In Javascript, l'assegnazione sarebbe simile a:

this.image = "'some/url/path/to/image.jpeg'"

o

this.image = "'" + myUrl + "'"

Tecnicamente, questo potrebbe essere fatto nel modello, ma l'escape richiesto per mantenerlo valido HTML non ne vale la pena.

Maggiori informazioni qui: la citazione del valore di url () è davvero necessaria?

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

Un'altra soluzione:

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

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

Cosa rende più conveniente questa soluzione? In primo luogo, è più pulito. E poi, se stai usando Vue CLI (presumo che tu lo faccia), puoi caricarlo con webpack.

Nota: non dimenticare che require()è sempre relativo al percorso del file corrente.

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

ci sono molti modi, ma ho trovato la stringa del modello facile e semplice

Lo stile di immagine di sfondo vincolante utilizzando un valore dinamico da v-for loop potrebbe essere fatto in questo modo.

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

Per il singolo componente ripetuto questa tecnica funziona per me

<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+')'
                }
            },
}

Ho provato la risposta @david e non ha risolto il mio problema. dopo un sacco di problemi, ho creato un metodo e restituito l'immagine con una stringa di stile.

Codice HTML

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

Metodo

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

Ho riscontrato un problema in cui le immagini di sfondo con spazi nel nome del file causavano la mancata applicazione dello stile. Per correggere questo ho dovuto assicurarmi che il percorso della stringa fosse racchiuso tra virgolette singole.

Nota l'escape \ 'nel mio esempio qui sotto.

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

La risposta accettata non sembrava risolvere il problema per me, ma così è stato

Assicurati che le dichiarazioni di backgroundImage siano racchiuse in url (e virgolette in modo che lo stile funzioni correttamente, indipendentemente dal nome del file.

Stile ES2015:

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

O senza ES2015:

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

Fonte: vuejs / vue-loader numero 646

In base alle mie conoscenze, se metti la cartella delle immagini nella cartella pubblica, puoi semplicemente fare quanto segue:

   <div :style="{backgroundImage: `url(${project.imagePath})`}"></div>

Se metti le tue immagini in src/assets/, devi usare require. Come questo:

   <div :style="{backgroundImage: 'url('+require('@/assets/'+project.image)+')'}">. 
   </div>

Una cosa importante è che non puoi usare un'espressione che contiene l'URL completo come questo project.image = '@/assets/image.png'. È necessario codificare la '@assets/'parte. Questo è quello che ho trovato. Penso che il motivo sia che in Webpack, viene creato un contesto se la tua richiesta contiene espressioni, quindi il modulo esatto non è noto in fase di compilazione. Invece, cercherà tutto nella @/assetscartella. Maggiori informazioni possono essere trovate qui . Ecco un altro documento che spiega come il caricatore Vue tratta il collegamento nei componenti a file singolo.