建站资讯

付款宝发力小程序流程_vue 解决data中界说图片相

作者:admin 发布时间:2021-01-05
vue 解决data中定义图片相对路径页面不显示的问题       这篇文章主要介绍了vue 解决data中定义图片相对路径页面不显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
!-- span 首页 /span -- img slot="icon" slot-scope="pro凡科抠图" :src="pro凡科抠图.active 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:使用绝对路径,域名形式:p>

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 v-for="icon of list" :key="icon.type" @click="Jump(icon.type)" 
 img :src="icon.imgUrl" / 
 p {{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('mon'),
 '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中定义图片相对路径页面不显示的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。



收缩