好资源导航 » 文章资讯 » vue 解决data中定义图片相对路径页面不显示的问题

vue 解决data中定义图片相对路径页面不显示的问题

2023-07-18 20:22:03 186

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

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

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






标签
标签

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

解决办法：

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中存入一组图片地址，并且循环渲染到组件上



{{icon.desc}}

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中需要在别名前面加上~符号

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

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

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

以上这篇vue解决data中定义图片相对路径页面不显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

vue 解决data中定义图片相对路径页面不显示的问题

热门推荐

随机推荐