v-for 遍历图片的时候,正常写法 src 路径读不出来

简介: v-for 遍历图片的时候,正常写法 src 路径读不出来

引子

使用 v-for 进行遍历的时候,正常写的相对路径引入,结果页面引入图片资源失败了

这是之前指定路径的方式

 {
   path: '/NanEverydayMatters',
   name: 'NanEverydayMatters',
   component: () => import('@/views/NanEverydayMatters'),
   meta: {
     title: '日常事务',
     icon: '../../assets/日常事务.png'
   }
 }

解决方案

require(相对路径)

注意这里面的相对路径是相对于当前这文件而言的图片相对路径,不是相对渲染组件而言的

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/Layout'

Vue.use(VueRouter)

export const AsideRoutes = [
  {
    path: '/',
    component: Layout,
    redirect: '/Home',
    children: [
      {
        path: '/Home',
        name: 'home',
        component: () => import('@/views/NanHome'),
        meta: {
          title: '首页',
          icon: { url: require('../assets/首页.png') }
        }
      },
      {
        path: '/NanAssessmentManagement',
        name: 'NanAssessmentManagement',
        component: () => import('@/views/NanAssessmentManagement'),
        meta: {
          title: '考核管理',
          icon: { url: require('../assets/考核管理.png') }
        }
      },
      {
        path: '/NanIdeologicalAndPoliticalTeam',
        name: 'NanIdeologicalAndPoliticalTeam',
        component: () => import('@/views/NanIdeologicalAndPoliticalTeam'),
        meta: {
          title: '思政队伍',
          icon: { url: require('../assets/思政队伍.png') }
        }
      },
      {
        path: '/NanPersonalInformation',
        name: 'NanPersonalInformation',
        component: () => import('@/views/NanPersonalInformation'),
        meta: {
          title: '个人信息',
          icon: { url: require('../assets/个人信息.png') }
        }
      },
      {
        path: '/NanStudentFinancialAid',
        name: 'NanStudentFinancialAid',
        component: () => import('@/views/NanStudentFinancialAid'),
        meta: {
          title: '学生资助',
          icon: { url: require('../assets/学生资助.png') }
        }
      },
      {
        path: '/NanAwardsAndAwards',
        name: 'NanAwardsAndAwards',
        component: () => import('@/views/NanAwardsAndAwards'),
        meta: {
          title: '评奖评优',
          icon: { url: require('../assets/评奖评优.png') }
        }
      },
      {
        path: '/NanWorkStudy',
        name: 'NanWorkStudy',
        component: () => import('@/views/NanWorkStudy'),
        meta: {
          title: '勤工俭学',
          icon: { url: require('../assets/勤工俭学.png') }
        }
      },
      {
        path: '/NanDisciplinarySanctions',
        name: 'NanDisciplinarySanctions',
        component: () => import('@/views/NanDisciplinarySanctions'),
        meta: {
          title: '违纪处分',
          icon: { url: require('../assets/违纪处分.png') }
        }
      },
      {
        path: '/NanCondominiumManagement',
        name: 'NanCondominiumManagement',
        component: () => import('@/views/NanCondominiumManagement'),
        meta: {
          title: '公寓管理',
          icon: { url: require('../assets/公寓管理.png') }
        }
      },
      {
        path: '/NanEverydayMatters',
        name: 'NanEverydayMatters',
        component: () => import('@/views/NanEverydayMatters'),
        meta: {
          title: '日常事务',
          icon: { url: require('../assets/日常事务.png') }
        }
      }
    ]
  }
]

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: () => import('@/views/NanLogin')
    },
    {
      path: '/404',
      component: () => import('@/views/404')
    },
    ...AsideRoutes
  ]
})

export default router
<template>
  <div class="LayoutMenu-container">
    <el-menu class="el-menu-vertical-demo" :collapse="isCollapse">
      <el-menu-item v-for="(item, index) in menuList" :key="item.path" :index="1 + index.toString()" @click.native="CheckViews(item.path)">
        <img :src="item.meta.icon.url" class="el-menu-item-img_menuIcon">
        <span class="el-menu-item-span_title" slot="title">{{item.meta.title}}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

小结

记录一次报错


谢谢款待

目录
相关文章
|
2月前
|
JavaScript 前端开发
JS将两个数组和合并成数组包对象格式的方法
JS将两个数组和合并成数组包对象格式的方法
40 0
|
2月前
|
JavaScript
js添加 删除 替换 插入节点所用的方法
js添加 删除 替换 插入节点所用的方法
25 0
如何根据文件夹中文件,生成对应名字的图片,名称一样的路径,这里用到了变量,将集合定义在外面,字符串拼接,正则表达式截取.jpg文件
如何根据文件夹中文件,生成对应名字的图片,名称一样的路径,这里用到了变量,将集合定义在外面,字符串拼接,正则表达式截取.jpg文件
|
12天前
|
JavaScript 索引
JS判断数组是否包含某个元素
JS判断数组是否包含某个元素
11 1
|
2天前
|
JavaScript
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取
Base64如何切割后面的内容,如何提取data:image/png;base64,之后的内容,Vue中.split中截取的数组如何使用数组进行获取
|
2月前
|
JavaScript 前端开发 索引
js添加、删除、替换、插入元素的方法
js添加、删除、替换、插入元素的方法
18 0
|
2月前
|
JavaScript 前端开发
js添加、删除、替换或插入元素。
js添加、删除、替换或插入元素。
14 0
|
2月前
|
JavaScript 前端开发
js 删除数组中指定元素——5种方式
js 删除数组中指定元素——5种方式
|
2月前
|
JavaScript
js中添加 删除 替换 插入节点所用的方法
js中添加 删除 替换 插入节点所用的方法
30 0
|
10月前
|
JavaScript
js中常用追加元素的几种方法
js中常用追加元素的几种方法