yyman001 / blog

日常疑问记录解答
5 stars 0 forks source link

vue无法渲染某些路径背景图 #7

Open yyman001 opened 7 years ago

yyman001 commented 7 years ago

在渲染某些图片路径有时候会无法渲染出来 列如:'http://3.bp.blogspot.com/-vGXHaT9Uu54/U7V7181HiNI/AAAAAAAAAMA/mOr9AUN0FxA/s1600/ss+(2014-06-05+at+11.04.40).jpg' 这种路径 解决方法,添加双引号

new Vue({
  el: '#vue',
  data: {
    image: 'http://3.bp.blogspot.com/-vGXHaT9Uu54/U7V7181HiNI/AAAAAAAAAMA/mOr9AUN0FxA/s1600/ss+(2014-06-05+at+11.04.40).jpg'
    },
    methods: {
        imageString() {
        return '\"'+this.image+'\"'; //注意这里要转义,平时写css是建议不要双引号的,但这个没有好像路径无法渲染,所以要加上
      }
    }
});

参考: https://jsfiddle.net/qyoj220f/10/ (渲染不成功例子) https://jsfiddle.net/qyoj220f/9/ (渲染成功例子) https://jsfiddle.net/qyoj220f/7/ (渲染成功例子)