Image d'arrière-plan de style de liaison de données Vue.js ne fonctionne pas

J'essaye de lier le src d'une image dans un élément, mais cela ne semble pas fonctionner. J'obtiens une "Expression non valide. Corps de la fonction générée: {backgroundImage: {url (image)}".

La documentation dit d'utiliser soit 'Kebab-case' ou 'camel-case'.

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

Voici un violon: https://jsfiddle.net/0dw9923f/2/

Le problème est que la valeur de backgroundImagedoit être une chaîne comme celle-ci:

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

Voici un violon simplifié qui fonctionne: https://jsfiddle.net/89af0se9/1/

Re: le commentaire ci-dessous sur kebab-case, voici comment vous pouvez le faire:

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

En d'autres termes, la valeur pour v-bind:styleest juste un objet Javascript simple et suit les mêmes règles.

MISE À JOUR: Une autre remarque sur les raisons pour lesquelles vous pourriez avoir du mal à faire fonctionner cela.

Vous devez vous assurer que votre imagevaleur est entre guillemets afin que la chaîne résultante de fin soit:

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

Sinon, si l'URL de votre image contient des caractères spéciaux (tels que des espaces ou des parenthèses), le navigateur risque de ne pas l'appliquer correctement. En Javascript, l'affectation ressemblerait à:

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

ou

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

Techniquement, cela pourrait être fait dans le modèle, mais l'échappement requis pour le garder valide HTML n'en vaut pas la peine.

Plus d'infos ici: Est-ce vraiment nécessaire de citer la valeur de url ()?

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

Une autre solution:

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

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

Qu'est-ce qui rend cette solution plus pratique? Premièrement, c'est plus propre. Et puis, si vous utilisez Vue CLI (je suppose que vous le faites), vous pouvez le charger avec webpack.

Remarque: n'oubliez pas que require()c'est toujours relatif au chemin du fichier actuel.

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

il y a plusieurs façons mais j'ai trouvé la chaîne de modèle facile et simple

La liaison du style d'image d'arrière-plan à l'aide d'une valeur dynamique de la boucle v-for pourrait être effectuée comme suit.

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

Pour un seul composant répété, cette technique fonctionne pour moi

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

J'ai essayé la réponse @david , et cela n'a pas résolu mon problème. après beaucoup de tracas, j'ai créé une méthode et renvoyé l'image avec une chaîne de style.

Code HTML

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

Méthode

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

J'ai rencontré un problème où les images d'arrière-plan avec des espaces dans le nom de fichier entraînaient la non-application du style. Pour corriger cela, je devais m'assurer que le chemin de la chaîne était encapsulé entre guillemets simples.

Notez le \ 'échappé dans mon exemple ci-dessous.

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

La réponse acceptée ne semblait pas résoudre le problème pour moi, mais cela a fait

Assurez-vous que vos déclarations backgroundImage sont enveloppées dans une URL (et des guillemets pour que le style fonctionne correctement, quel que soit le nom du fichier.

Style ES2015:

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

Ou sans ES2015:

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

Source: vuejs / vue-loader issue # 646