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 相关文章推荐
jquery动态更换设置背景图的方法
Mar 25 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
浅析jQuery EasyUI中的tree使用指南
Dec 18 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
原生JS写Ajax的请求函数功能
Dec 22 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
浅谈vue 多个变量同时赋相同值互相影响
Aug 05 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
ant design vue的form表单取值方法
Jun 01 Vue.js
解决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数据饼图效果实现代码
2011/11/23 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
php 模拟GMAIL,HOTMAIL(MSN),YAHOO,163,126邮箱登录的详细介绍
2013/06/18 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
YII框架实现自定义第三方扩展操作示例
2019/04/26 PHP
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
24款热门实用的jQuery插件推荐
2014/12/24 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
使用vuex缓存数据并优化自己的vuex-cache
2018/05/30 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
vue项目中实现缓存的最佳方案详解
2019/07/11 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
python获取beautifulphoto随机某图片代码实例
2013/12/18 Python
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python实现端口检测的方法
2018/07/24 Python
深入浅析Python 中 is 语法带来的误解
2019/05/07 Python
Python爬虫使用浏览器cookies:browsercookie过程解析
2019/10/22 Python
python的等深分箱实例
2019/11/22 Python
Mankind美国/加拿大:英国领先的男士美容护发用品公司
2018/12/05 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
小学生自我评价范例
2013/09/24 职场文书
班主任寄语大全
2014/04/04 职场文书
五一促销活动总结
2014/07/01 职场文书
单位工作证明书格式
2014/10/04 职场文书
小学毕业感言200字
2015/07/30 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL
分享MySQL常用 内核 Debug 几种常见方法
2022/03/17 MySQL