在Nuxt3中如何实现批量引入文件夹的图片

nuxt3不使用require的原因

1. 模块系统的原因：在nuxt3中我们用的是ES模块系统来进行代码的组织和构建，但是require中用的是commonJS模块化中的语法，两者不能通用。
2. 静态分析：Nuxt 3 支持静态分析以优化构建和性能。使用 require 会导致代码的动态性，难以进行静态分析和优化。

进入正题 在不使用require的情况下，我们应该如何获取图片

如果你只需要引入少量图片，你可以选择直接引入

使用动态的引入方式:

const module = await import('./path/to/module');

或者使用ES模块的静态import方法:

import module from "./path/to/module";

如果引入文件夹中的图片

let imgObj = ref({})
// 获取状态->图片url
function getStatusImgDict() {
    const modules = import.meta.glob(`../../assets/image/company_info/software_works/*.png`, {eager: true});
    for (const key in modules) {
        let name = key.split('/').slice(-1)[0].split('.')[0]
        imgObj.value[name] = modules[key].default
    }
    console.log(imgObj)
}

// 状态->图片url的dict
const statusImgDict = getStatusImgDict();

// 根据传入的状态获取
function getStatusImg(status) {
    return statusImgDict[status];
}

在这段代码中1. getStatusImgDict 函数用于获取状态与对应图片的 URL 的字典。它通过调用 import.meta.glob 方法来获取匹配特定路径模式的图片模块，并将其转换为字典存储到相应的变量中。 statusImgDict 是在调用 getStatusImgDict 函数后得到的状态与图片 URL 的字典。 getStatusImg 函数接受一个状态参数，并根据该状态从 statusImgDict 中获取对应的图片 URL 并返回。

它最终会返回一个以文件名：路径的一个数组，如果你想修改他的属性名，可以直接在上面对name处理时进行处理。

总结

第一次写这种文章，有什么问题或者我的代码有什么错误，大家都可以通过评论区告诉我，感谢观看！欢迎指导！