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/
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 ()?
<div class="img-banner" :style="{'background-image': 'url(' + require('./assets/media/baner1.jpg') + ')'}"></div>
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>
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+')'
}
},
}