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]" />

例子:

相关推荐
柯南二号6 小时前
【大前端】React 父子组件通信、子父通信、以及兄弟(同级)组件通信
前端·javascript·react.js
pepedd8646 小时前
突破 JS 单线程限制:Web Worker 实战指南
前端·javascript
加个鸡腿儿6 小时前
异步函数中return与catch的错误处理
前端·javascript
黑狼传说6 小时前
深入探索V8引擎的编译机制:从JavaScript到机器码的完整之旅
前端·javascript·v8
麦子邪6 小时前
C语言中奇技淫巧08-使用alloca/__builtin_alloca从栈上分配空间
c语言·开发语言
kyle~6 小时前
计算机网络---CA证书体系(Certificate Authority)
前端·数据库·计算机网络
{⌐■_■}6 小时前
【JavaScript】读取商品页面中的结构化数据(JSON-LD),在不改动服务端情况下,实现一对一跳转
开发语言·javascript·json
站长朋友6 小时前
香港主机支持PHP版本吗
开发语言·php·香港主机php版本·php 8.4支持·wordpress主机配置·香港主机性能对比·php版本兼容性测试