我的背景图像属性没有正确连接

Question

我有一些与 vuejs 一起使用的代码，它们绑定了一个域以及一个应该添加到域中的附加片段。 当涉及到域和 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>

Answer 1

你的 Vue 声明一团糟。
修复它后，背景图像按原样连接

 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>

Answer 2

我强烈建议使用模板字符串以获得更好的可读性。 并且建议使用一种方法而不是在模板中构建背景图像路径。

 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>