Tengo un código que estoy usando con vuejs que vincula un dominio, así como un fragmento adicional que debería agregarse al dominio. Parece que no puedo descifrar la concatenación adecuada cuando se trata del dominio y item.url
var vm = new Vue({ el: '#app', data: { items:[], domain:"https://example.com/" }, }, mounted: function () { }) }, }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id ="app"> <div v-for="item in items" class="gallery-cell" v-bind:style="{ backgroundImage: 'url('+ domain + item.url + ')' }">{{ item.text}}</div> </div>Su declaración de Vue es un desastre total.
Después de arreglarlo, la imagen de fondo se concatena como debería
new Vue({ el: '#app', data: { items: [ { text: 'test1', url: 'ac0/cat-1364386.jpg' }, { text: 'test2', url: '867/volcanic-mt-ngauruhoe-1378772.jpg' }, { text: 'test3', url: '981/cow-1380252.jpg' } ], domain: "https://images.freeimages.com/images/large-previews/" } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="item in items" v-bind:style="{ backgroundImage: 'url('+ domain + item.url + ')' }" class="gallery-cell"> {{ item.text }} </div> </div>Recomiendo encarecidamente utilizar cadenas de plantilla para una mejor legibilidad. Y se recomienda utilizar un método y no crear la ruta de la imagen de fondo dentro de la plantilla.
new Vue({ el: '#app', data: { items: [ { text: 'a', url: '10096730/pexels-photo-10096730.jpeg' }, { text: 'b', url: '9772527/pexels-photo-9772527.jpeg' }, ], domain: 'https://images.pexels.com/photos/' }, methods: { getBackgroundImageStyle(url) { return `backgroundImage: url(${this.domain}${url})`; } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id ="app"> <div class="gallery-cell" v-for="item in items" :style="getBackgroundImageStyle(item.url)"> {{ item.text }} </div> </div>