react用useImages读取图片,方便backgroundImage

注意import.meta.glob中定义的文件夹路径,视情况而定,可能是assets或images

复制代码
import { useMemo } from "react";

export default function useImages() {
  // 扫描 images 目录及其子目录下的所有图片
  const modules = import.meta.glob('@/assets/**/*.{png,jpg,jpeg,svg}', { eager: true });

  const images = useMemo(() => {
    const map = {};
    Object.entries(modules).forEach(([path, mod]) => {
      // 提取相对路径,例如 icons/icon1.png
      const relativePath = path.split('/images/')[1];
      map[relativePath] = mod.default;
    });
    return map;
  }, [modules]);

  return images;
}

使用方法:

复制代码
import useImages from "@/hooks/useImages";

  const uimages = useImages()





<div style={{ backgroundImage: "url(" + uimages['bgred.png'] + ")" }}>

<img src={uimages['recommed.png']} className="w-7 ml-[10px]" />

例子:

相关推荐
正义的大古5 分钟前
OpenLayers地图交互 -- 章节九:拖拽框交互详解
前端·vue.js·openlayers
三十_A33 分钟前
【实录】使用 Verdaccio 从零搭建私有 npm 仓库(含完整步骤及避坑指南)
前端·npm·node.js
疯癫的老码农36 分钟前
【word解析】Java文件解析问题排查:无法找到OMML2MML.xsl的IO异常解析
java·开发语言·spring boot·spring·maven
huangql52038 分钟前
从零到一打造前端内存监控 SDK,并发布到 npm ——基于 TypeScript + Vite + ECharts的解决方案
前端·typescript·echarts
weixin_4569042740 分钟前
离线下载npm包
前端·npm·node.js
低代码布道师41 分钟前
少儿舞蹈小程序(19)地址列表功能实现及默认地址逻辑
前端·低代码·小程序
90后的晨仔43 分钟前
Vue3 + TypeScript + Pinia 实战全解析
前端
90后的晨仔1 小时前
Vue 3 + TypeScript + Pinia 实战架构指南
前端
路弥行至1 小时前
C语言入门教程 | 第一讲:C语言零基础入门教程:第一个程序到变量运算详解
c语言·开发语言·经验分享·笔记·单片机·其他·课程设计
妄小闲1 小时前
免费html网页模板 html5网站模板 静态网页模板
前端·html·html5