vue data中定义图片相对路径页面不显示怎么办？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

vue在data中定义图片相对路径：

data() { return { active: 1, icon: { active: "../assets/images/home-selected.png", inactive: "../assets/images/home.png" } }; }

页面使用vant的标签栏自定义图标：

<van-tabbar v-model="active"> <van-tabbar-item info="3"> <!-- <span>首页</span> --> <img slot="icon" slot-scope="props" :src="props.active &#63; icon.active : icon.inactive" /> </van-tabbar-item> <van-tabbar-item icon="search">标签</van-tabbar-item> <van-tabbar-item icon="setting-o">标签</van-tabbar-item> </van-tabbar>

结果图片没有在页面上显示，

解决办法：

1：使用绝对路径，域名形式：https://

2：使用require：

data() { return { active: 1, icon: { active: require("../assets/images/home-selected.png"), inactive: require("../assets/images/home.png") } }; }

补充知识：Vue在data中存入静态图片地址，使用别名引入的方法

在项目开发中，icons的引入遇见了麻烦

在data中存入一组图片地址，并且循环渲染到组件上

<div class="icons-item" v-for="icon of list" :key="icon.type" @click="Jump(icon.type)"> <img class="icons-img" :src="icon.imgUrl" /> <p class="icons-desc">{{icon.desc}}</p></div>data () { return { list: [ { "type": "scenic", "imgUrl": 'assets/webIcons/scenic.png', "desc": "景点门票" } ] } }

webpack已经配置了别名

resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'styles': resolve('src/assets/styles'), 'common': resolve('src/common'), 'assets': resolve('src/assets') } },

但是发现有问题

图片地址没有背正确的解析

解决办法

在html中 需要在别名前面加上 ~ 符号

<img src="~assets/webIcons/scenic.png" />

在js中，需要使用require('url')

list: [ { "type": "scenic", "imgUrl": require('assets/webIcons/scenic.png'), "desc": "景点门票" } ]

这样图片就可以成功引入了

感谢各位的阅读！看完上述内容，你们对vue data中定义图片相对路径页面不显示怎么办大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注亿速云行业资讯频道。