第一种
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; }