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

第一种

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; }