3
votes

Comment définir l'URL de l'image d'arrière-plan avec vue bind

J'ai un composant vue qui est utilisé sur la base d'un tableau d'éléments. Le tableau contient toutes les informations pertinentes nécessaires dans le composant. Le problème est de définir l'URL de l'image d'arrière-plan. J'ai seulement réussi à le faire fonctionner en lui donnant toute la syntaxe css au lieu d'une simple URL d'image. Comment puis-je le faire fonctionner uniquement avec une URL d'image?

<div id="app">
  <book
  v-for="item in items"
  v-bind:item="item"
    ></book>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
Vue.component('book', {
  props: ['item'],
  template: '<div class="book" :class=" item.itemClass "><a :href="item.link" class="card"><div class="thumb" :style="item.url"></div><article><h1>{{  item.titlu }}</h1><span>{{ item.autor }}</span></article></a></div>'
})
var vueApp = new Vue({
    el: '#app',
    data: {
        items: [
            {
                itemClass: 'item-1',
                titlu: 'Title 1',
                autor: 'Author 1',
                link: 'www.google.com',
                url: 'background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg);',
            },
            {
                itemClass: 'item-2',
                titlu: 'Title 2',
                autor: 'Author 2',
                link: 'www.google.com',
                url: 'background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg)',
            },
            {
                itemClass: 'item-2',
                titlu: 'Title 3',
                autor: 'Author 3',
                link: 'www.google.com',
                url: 'background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg);',
            },                      
        ]
    },
})
</script>

vue.js

4 commentaires

avez-vous eu votre réponse?

Ok, donc la plupart des réponses ne sont que des réponses partielles au problème. Bien sûr, je peux utiliser backgroundImage et définir l'URL, mais cela ne fonctionne pas comme prévu pour les images locales, cela ne fonctionne qu'avec des liens. Peut-être que cela ne faisait pas partie de la question en soi, mais j'aimerais une solution de fond d'image css qui fonctionne comme il se doit, pas des astuces qui fonctionnent à 50%.

Ensuite, vous devez transmettre le chemin correct à l'URL. si vous ajoutez un exemple où vous avez ajouté des images locales, n'importe qui peut vous aider ici à coup sûr. Mais les détails sont obligatoires et je ne sais pas qui a refusé chaque réponse.

Je n'ai pas voté ni voté contre aucune réponse, je ne sais pas pourquoi ils ont voté contre.

3 Réponses :

-2
votes

Liez l'URL à l'attribut de style

<div class="book" :class=" item.itemClass " :style="item.url">

Voici un exemple fonctionnel: https://jsfiddle.net/nicolai_lebek/g6k3v49f/3/

0 commentaires

2
votes

La liaison de styles en ligne nécessite un objet ou tableau d'objets , alors que vous passez une chaîne .

Sa forme devrait être:

:style="{ backgroundImage: 'url(...)' }"

1 commentaires

En particulier, cela fonctionne: . N'oubliez pas de mettre des espaces avant et après + .

-1
votes

Utilisez le code ci-dessous.

<div id="app">
        <book v-for="item in items" v-bind:item="item"></book>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        Vue.component('book', {
            props: ['item'],
            template: `<div class="book" :class=" item.itemClass "><a :href="item.link" class="card"><div class="thumb" :style="{background: 'url('+item.url+')'}"></div><article><h1>{{  item.titlu }}</h1><span>{{ item.autor }}</span></article></a></div>`

        })
        var vueApp = new Vue({
            el: '#app',
            data: {
                items: [{
                        itemClass: 'item-1',
                        titlu: 'Title 1',
                        autor: 'Author 1',
                        link: 'www.google.com',
                        url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg',
                    },
                    {
                        itemClass: 'item-2',
                        titlu: 'Title 2',
                        autor: 'Author 2',
                        link: 'www.google.com',
                        url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg',
                    },
                    {
                        itemClass: 'item-2',
                        titlu: 'Title 3',
                        autor: 'Author 3',
                        link: 'www.google.com',
                        url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/flex-1.jpg',
                    },
                ]
            },
        })
    </script>

0 commentaires