当前位置:首页 >> 网络编程

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="/UploadFiles/2021-04-02/props.active ">

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

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="/UploadFiles/2021-04-02/icon.imgUrl">

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="/UploadFiles/2021-04-02/scenic.png">

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

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

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

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

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