vue中require引入路径存在变量

最新推荐文章于 2024-08-20 10:22:29 发布

是拾玖不是十九

最新推荐文章于 2024-08-20 10:22:29 发布

阅读量6.4k

点赞数 1

分类专栏：前端 webpack vue

本文链接：https://blog.youkuaiyun.com/qq_39131699/article/details/118251147

版权

前端同时被 3 个专栏收录

44 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

webpack

1 篇文章

订阅专栏

本文介绍了在Vue项目中如何处理后台动态返回的图片名称，通过require.context结合后台数据，实现动态加载图片资源，解决require路径拼接报错的问题，并展示了关键代码和实际效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

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

问题

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

解决思路

使用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"
    });
  }
});