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 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
Jquery插件实现点击获取验证码后60秒内禁止重新获取
Mar 13 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
Jan 03 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
vue.js指令v-for使用以及下标索引的获取
Jan 31 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
JavaScript组合模式---引入案例分析
May 23 Javascript
微信小程序基础教程之echart的使用
Jun 01 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一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
详解PHP中的null合并运算符
2015/12/30 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP实现阿里大鱼短信验证的实例代码
2017/07/10 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
vue项目总结之文件夹结构配置详解
2017/12/13 Javascript
基于vue-ssr服务端渲染入门详解
2018/01/08 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
Python中文字符串截取问题
2015/06/15 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
pandas.read_csv参数详解(小结)
2019/06/21 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
python障碍式期权定价公式
2019/07/19 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
美国性感女装网站:bebe
2017/03/04 全球购物
C++面试题目
2013/06/25 面试题
土木工程求职信
2014/05/29 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
运动会广播稿300字
2015/08/19 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
CentOS安装Nginx并部署vue
2022/04/12 Servers