Vue绑定background-image时domain与item.url拼接异常如何解决

问题原因 #

• 原Vue实例代码存在语法错误，导致实例初始化失败，绑定逻辑不生效
• backgroundImage的url()参数未包裹引号，路径含特殊字符时会解析失败
• 需注意域名和路径的斜杠冲突，避免拼接后出现重复斜杠

修复后的JS代码 #

var vm = new Vue({
  el: '#app',
  data: {
    items: [],
    domain: "https://example.com/"
  },
  mounted: function () {
    // 此处补充你的items数据请求逻辑，下方为测试示例
    this.items = [
      {url: 'test1.jpg', text: '测试内容1'},
      {url: 'test2.jpg', text: '测试内容2'}
    ]
  }
})

修复后的HTML代码 #

<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>

额外注意事项 #

• 如果你的item.url本身开头就带/，请把domain末尾的/删掉，避免拼接后出现https://example.com//test.jpg的错误路径
• 如果需要兼容路径含中文、空格的场景，可在拼接时套一层encodeURI()处理：'url(\'' + encodeURI(domain + item.url) + '\')'

内容的提问来源于stack exchange，提问作者Vzupo