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

 更新时间:2020年08月13日 15:11:28   作者:让我看看谁在学习  
这篇文章主要介绍了vue 解决data中定义图片相对路径页面不显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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>

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

解决办法:

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

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 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')
  }
 },

但是发现有问题

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

解决办法

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

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

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

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

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

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

相关文章

  • vue递归获取父元素的元素实例

    vue递归获取父元素的元素实例

    这篇文章主要介绍了vue递归获取父元素的元素实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue.js实现网格列表布局转换方法

    Vue.js实现网格列表布局转换方法

    下面小编就为大家带来一篇Vue.js实现网格列表布局转换方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • vue3缓存页面keep-alive及路由统一处理详解

    vue3缓存页面keep-alive及路由统一处理详解

    当我们不想每次跳转路由都会重新加载页面时(重新加载页面很耗时),就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下
    2021-10-10
  • 基于Vue的移动端图片裁剪组件功能

    基于Vue的移动端图片裁剪组件功能

    这篇文章给大家介绍了基于Vue的移动端图片裁剪组件功能,因为移动端是用vue,所以就写成了一个vue组件,下面就说说自己的一些实现思路,需要的朋友可以参考下
    2017-11-11
  • 详解vue 单页应用(spa)前端路由实现原理

    详解vue 单页应用(spa)前端路由实现原理

    这篇文章主要介绍了详解vue 单页应用(spa)前端路由实现原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue中组件的name属性含义和用法示例

    vue中组件的name属性含义和用法示例

    组件是有name属性的,匹配的就是组件的name,下面这篇文章主要给大家介绍了关于vue中组件的name属性含义和用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue 自定义指令directives及其常用钩子函数说明

    vue 自定义指令directives及其常用钩子函数说明

    这篇文章主要介绍了vue 自定义指令directives及其常用钩子函数说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • vue+axios+element ui 实现全局loading加载示例

    vue+axios+element ui 实现全局loading加载示例

    今天小编就为大家分享一篇vue+axios+element ui 实现全局loading加载示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue3中使用vuex4的实现示例

    Vue3中使用vuex4的实现示例

    本文主要介绍了Vue3中使用vuex4的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 使用Vue-Router 2实现路由功能实例详解

    使用Vue-Router 2实现路由功能实例详解

    vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能,需要的朋友可以参考下
    2017-11-11

最新评论