vue中require引入路径存在变量

柔情只为你懂 2022-10-10 04:54 301阅读 0赞

# 需求 #

菜单icon是通过后台获取的，但图片本身存在前端，后台返回的数据是图片名称。

# 问题 #

直接使用require(‘路径名’+图片名+’.png’)报错：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70]

# 解决思路 #

使用require.context找到图片相关信息，名称和路径等，然后把名称和后台传过来的图片名称比较，相同的就把对应的图片路径赋值。

# 关键代码 #

const path = require("path");
    const icons = require.context("@assets/img/home/system", false, /\.png$/);  // 获取@assets/img/home/system文件夹下（不包括子文件夹）所有的png文件，这里是一个webpackContext对象
    this.$api.help1.menu().then(res => { 
      if (res.code === 2000) { 
        let data = res.data;
        data.menu.forEach(item => { 
          let iconItem;
          let activeIconItem;
          icons.keys().forEach(key => {   // 遍历找到的png文件
            const name = path.basename(key, ".png");  // 获取图片名称
            if (name === item.icon) { 
              iconItem = icons(key).default || icons(key);  // 这里webpack已经帮我们把图片资源编译成了base64文件，这里的iconItem实际上是一串base64信息
            }
            if (name === item.active_icon) { 
              activeIconItem = icons(key).default || icons(key);
            }
          });
          let menuItem = { 
            id: item.url,
            icon: iconItem,
            active_icon: activeIconItem,
            name: item.title,
            path: item.url,
            children: []
          };
          this.menuList.push(menuItem);
        });
      } else { 
        this.$message({ 
          message: res.msg,
          type: "warning"
        });
      }
    });

# 效果图 #

![在这里插入图片描述][20210626164149113.png]

> 参考文档：  
> [依赖管理 | webpack 中文文档][_ webpack]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTMxNjk5_size_16_color_FFFFFF_t_70]: /images/20221005/e7be5be139d34051acf591a25db1150d.png
[20210626164149113.png]: /images/20221005/bf6683e4062944948a9f0848d704501e.png
[_ webpack]: https://webpack.docschina.org/guides/dependency-management/

发表评论取消回复

表情：

评论列表（有 0 条评论，301人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中import引入模块路径中@符号是什么意思

在编写vue文件中引入模块 import model from "@/common/model"; 这里路径前面的“@”符号表示什么意思？ res...

怼烎@/ 2024年04月18日 16:16/ 0 赞/ 90 阅读

相关【Vue】Vue 中引入 ECharts

目录 1、安装 2、在 main.js 中引入 3、在需要调用的页面中的 js 使用 4、最重要的一点！ -------------------- 介绍 Echa

谁践踏了优雅/ 2023年07月11日 08:41/ 0 赞/ 51 阅读

相关 vue require引入文件夹下所有js文件

const modulesFiles = require.context("./modules", true, /\.js$/); // you do

迷南。/ 2023年02月20日 02:35/ 0 赞/ 102 阅读

相关 vue使用@路径引入

vue使用@路径引入，这个在项目中很常见；项目中使用引入文件有时候路径比较深，需要使用"`../../../xx.js`"这种类似的路劲引入，这种方式比较笨，可以使用`we

清疚/ 2023年02月15日 07:59/ 0 赞/ 28 阅读

相关 vue中图片路径以变量形式require传入

data() { return { zwtpImg:require('../../../public/img/zwtp.png')

分手后的思念是犯贱/ 2023年02月14日 10:41/ 0 赞/ 11 阅读

相关 vue-cli 3 全局引入scss变量

1、安装sass-resources-loader npm install sass-resources-loader -S 2、在根路径下（package.jso

系统管理员/ 2023年02月14日 06:47/ 0 赞/ 37 阅读

相关 vue-cli4中引入全局less变量的方式

1.安装 style-resources-loader npm i style-resources-loader --save-dev 2.安装vue-cli-p

ゝ一世哀愁。/ 2022年12月25日 04:54/ 0 赞/ 255 阅读

相关 vue中require引入路径存在变量

需求菜单icon是通过后台获取的，但图片本身存在前端，后台返回的数据是图片名称。问题直接使用require(‘路径名’+图片

柔情只为你懂/ 2022年10月10日 04:54/ 0 赞/ 302 阅读

相关 Vue-Cli 3 引入 SCSS 全局变量

首先创建一个全局变量文件 `global.scss` $theme-color: efefef; 复制代码编辑`vue.config.js`

以你之姓@/ 2022年01月19日 00:21/ 0 赞/ 734 阅读

相关 vue引入全局过滤器，引入全局公共方法，引入全局变量

-------------------- 多读多写多记录，多学多练多思考。----------- Grapefruit.Banuit Gang(香柚帮) ---------

川长思鸟来/ 2021年11月16日 17:38/ 0 赞/ 716 阅读