码迷,mamicode.com
首页 > 其他好文 > 详细

vue 相对路径的图片 不显示问题

时间:2017-04-10 19:10:13      阅读:599      评论:0      收藏:0      [点我收藏+]

标签:域名   default   template   code   绝对路径   class   nbsp   print   方案   

例如

data () {
    return {
        img: ../../images/jifen/index/img_list_default_pic.jpg //路径也没问题啊,怎么不显示呢,难道他瞎啦!
    }
}

 

然后在template

<img :src="img" /> 

第一种解决方案是:简单粗暴型 使用绝对路径也就是带上域名即可

第二种解决方案是:非常智慧型 代码如下:

data () {
 return {
 img: require(../../images/jifen/index/img_list_default_pic.jpg//加上require即可
   }
}

 

另一种方式可以当做背景

 

<div :style="{backgroundImage: ‘url(‘ + img + ‘)‘}"></div>

 

或者直接在css中定义

 

background-image: url(../../images/jifen/index/img_list_default_pic.jpg);

 

vue 相对路径的图片 不显示问题

标签:域名   default   template   code   绝对路径   class   nbsp   print   方案   

原文地址:http://www.cnblogs.com/sichaoyun/p/6690382.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!