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


Posted in Javascript onAugust 13, 2020

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 ? 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>

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

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

解决办法:

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

2:使用require:

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

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

补充知识: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')
  }
 },

但是发现有问题

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

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

解决办法

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

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

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

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

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

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

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

Javascript 相关文章推荐
动态加载iframe
Jun 16 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
May 28 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
JS中双击和单击事件冲突的解决方法
Apr 09 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 #Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 #Javascript
jQuery中event.target和this的区别详解
Aug 13 #jQuery
在Vue 中获取下拉框的文本及选项值操作
Aug 13 #Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 #Javascript
Postman参数化实现过程及原理解析
Aug 13 #Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 #Javascript
You might like
关于时间计算的结总
2006/12/06 PHP
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
php 遍历显示文件夹下所有目录、所有文件的函数,没有分页的代码
2008/11/14 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
php汉字转拼音的示例
2014/02/27 PHP
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
jQuery中next()方法用法实例
2015/01/07 Javascript
使用AngularJS对路由进行安全性处理的方法
2015/06/18 Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
2015/11/07 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
Webpack中css-loader和less-loader的使用教程
2017/04/27 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
layui实现点击按钮给table添加一行
2018/08/10 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
Python 调用DLL操作抄表机
2009/01/12 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
Python实现的微信好友数据分析功能示例
2018/06/21 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
Python3.5面向对象编程图文与实例详解
2019/04/24 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
python IP地址转整数
2020/11/20 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
一套英文Java笔试题面试题
2016/04/21 面试题
俞敏洪一分钟演讲稿
2014/08/26 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers