Vue.js data-bind style backgroundImage no funciona

Estoy tratando de vincular el src de una imagen en un elemento, pero parece que no funciona. Recibo una "Expresión no válida. Cuerpo de función generado: {backgroundImage: {url (image)}".

La documentación dice usar 'Kebab-case' o 'camel-case'.

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

Aquí hay un violín: https://jsfiddle.net/0dw9923f/2/

El problema es que el valor de backgroundImagedebe ser una cadena como esta:

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

Aquí hay un violín simplificado que está funcionando: https://jsfiddle.net/89af0se9/1/

Re: el comentario a continuación sobre kebab-case, así es como puedes hacer eso:

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

En otras palabras, el valor de v-bind:stylees solo un objeto Javascript simple y sigue las mismas reglas.

ACTUALIZACIÓN: Otra nota sobre por qué puede tener problemas para hacer que esto funcione.

Debe asegurarse de que su imagevalor esté entre comillas para que la cadena final resultante sea:

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

De lo contrario, si la URL de su imagen tiene caracteres especiales (como espacios en blanco o paréntesis), es posible que el navegador no la aplique correctamente. En Javascript, la asignación se vería así:

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

o

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

Técnicamente, esto podría hacerse en la plantilla, pero el escape requerido para mantenerlo HTML válido no vale la pena.

Más información aquí: ¿Es realmente necesario citar el valor de url ()?

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

Otra solución:

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

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

¿Qué hace que esta solución sea más conveniente? En primer lugar, es más limpio. Y luego, si está utilizando Vue CLI (supongo que sí), puede cargarlo con webpack.

Nota: no olvide que require()siempre es relativo a la ruta del archivo actual.

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

hay varias formas, pero encontré la cadena de plantilla fácil y simple

La vinculación del estilo de la imagen de fondo utilizando un valor dinámico del bucle v-for se podría hacer así.

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

Para un solo componente repetido, esta técnica funciona para mí.

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

Traté @ David respuesta, y no fijó mi problema. después de muchas molestias, hice un método y devolví la imagen con la cadena de estilo.

código HTML

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

Método

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

Experimenté un problema en el que las imágenes de fondo con espacios en el nombre del archivo provocaban que no se aplicara el estilo. Para corregir esto, tuve que asegurarme de que la ruta de la cadena estuviera encapsulada entre comillas simples.

Tenga en cuenta el \ 'escapado en mi ejemplo a continuación.

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

La respuesta aceptada no pareció resolver el problema para mí, pero esto sí

Asegúrese de que sus declaraciones de backgroundImage estén envueltas en URL (y comillas para que el estilo funcione correctamente, sin importar el nombre del archivo.

ES2015 Estilo:

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

O sin ES2015:

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

Fuente: vuejs / vue-loader issue # 646