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 相关文章推荐
Javascript 跨域访问解决方案
Feb 14 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
一个JavaScript函数把URL参数解析成Json对象
Sep 24 Javascript
Node.js开发者必须了解的4个JS要点
Feb 21 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
数组Array的一些方法(总结)
Feb 17 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
理解Koa2中的async&amp;await的用法
Feb 05 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
js神秘的电报密码 哈弗曼编码实现
Sep 10 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 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
php empty函数 使用说明
2009/08/10 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
ThinkPHP模板判断输出Present标签用法详解
2014/06/30 PHP
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
AngularJS打开页面隐藏显示表达式用法示例
2016/12/25 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
Angular服务Request异步请求的实例讲解
2018/08/13 Javascript
vue实现打印功能的两种方法
2018/09/07 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
python 打印对象的所有属性值的方法
2016/09/11 Python
python中reload(module)的用法示例详解
2017/09/15 Python
python实现图像识别功能
2018/01/29 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
从0开始的Python学习016异常
2019/04/08 Python
python hashlib加密实现代码
2019/10/17 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
美国性感内衣店:Yandy
2018/06/12 全球购物
指针和引用有什么区别
2013/01/13 面试题
学雷锋志愿服务月活动总结
2014/03/09 职场文书
六个一活动实施方案
2014/03/21 职场文书
社区居务公开实施方案
2014/03/27 职场文书
社团招新宣传语
2015/07/13 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
用 Python 定义 Schema 并生成 Parquet 文件详情
2021/09/25 Python
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技