Vuejs : Problème de liaisons de styles avec une image dynamique

Bonjour,

Mon objectif est de créer une page avec une bannière personnalisable par l’utilisateur connecté.
De plus, je voudrais que ma bannière contienne un bouton.

L’idée est donc de stocker l’image dans une variable pour pouvoir l’utiliser dans un ‘v-bind:style’. Mais pour une raison que j’ignore ça ne fonctionne pas. Voici mon code :

<template>
<div class="root-component">
    <div class="banner-block" v-bind:style="bannerBackground">
        <button class="button-ex">Button</button>
    </div>
</div>
</template>

<script>
export default {
    data () {
        return {
            bannerUrl : require('@/assets/testing/img_test.jpg'),
            bannerBackground : {
                background : 'url(' + this.bannerUrl + ')' 
            }
        }

        /* code qui fonctionne mais pas dynamique
        return {
            bannerBackground : {
                background : 'url(' + require('@/assets/testing/img_test.jpg') + ')' 
            }
        }
        */
    }
}
</script>

<style scoped>
.root-component{
    background-color: brown;
}
.banner-block{
    width: 100%;
    height: 300px;
}
.button-ex{
    margin: 50px;
}
</style

Un peu d’aide ne serait pas de refus. Merci d’avance

this.bannerUrl n’est pas encore défini :

        return {
            bannerUrl : require('@/assets/testing/img_test.jpg'),
            bannerBackground : {
                background : 'url(' + this.bannerUrl + ')' 
            }
        }
  • soit t’utilises une variable
        const bannerUrl = require('@/assets/testing/img_test.jpg')
        return {
            bannerUrl,
            bannerBackground : {
                background : 'url(' + bannerUrl + ')' 
            }
        }
  • soit un computed
data: () => ({
  bannerUrl: require('@/assets/testing/img_test.jpg')
}),
computed: {
  bannerBackground () {
    return { background : `url(${this.bannerUrl})` }
  }
}

Ah oui je vois! Merci pour ta réponse matxx :slightly_smiling_face: