web-dev-qa-db-fra.com

Vue.js style de liaison de données backgroundImage ne fonctionne pas

J'essaie de lier le src d'une image dans un élément, mais cela ne semble pas fonctionner. Je reçois une "Expression invalide. Corps de la fonction générée: {backgroundImage: {url (image)}" ".

La documentation dit d'utiliser soit «Kebab-case», soit «camel-case».

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

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

javascripthtmlvue.js
37
CosX

Le problème est que la valeur de backgroundImage doit ê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 à propos de 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 de v-bind:style est simplement un objet Javascript simple et suit les mêmes règles.

MISE À JOUR: Une autre remarque sur les raisons pour lesquelles vous pourriez avoir de la difficulté à faire en sorte que cela fonctionne.

Vous devez vous assurer que votre valeur image est entre guillemets pour que la chaîne résultante soit:

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

Sinon, si votre URL d'image contient des caractères spéciaux (tels que des espaces ou des parenthèses), il est possible que le navigateur ne l'applique pas correctement. En Javascript, la tâche ressemblerait à ceci:

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

ou

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

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

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

102
David K. Hess
<div class="img-banner" :style="{'background-image': 'url(' + require('./assets/media/baner1.jpg') + ')'}"></div>
7
mohammad nazari

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

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

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