react中用css加载背景图的2种情况

大猫会长2025-12-23 10:28

第一种

css文件中载入背景图,用@或./之类的都可以

resolve.alias已经设置过@路径

就算vite.config.js中设置了base,打包时会自动加上,无需操心

第二种

行内背景图片地址,在jsx中使用

复制代码

import useImages from '@/useImages.js'
var pic = useImages()

images下直属图片

useImages源码

因为源码中已写死了images,所以在调用时,无需重复写images,只需撰写余下路径

另外如果你的文件夹不是images,可以改成别的文件夹名

复制代码

import { useMemo } from "react";

export default function useImages() {
  // 扫描 images 目录及其子目录下的所有图片
  const modules = import.meta.glob('@/images/**/*.{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;
}