如何在Vite-React组件中程序化加载本地目录所有图片？

基于Vite-React脚手架开发猫咪图库，计划将图片分为floofs、sleps、snyks三类，每类存放在单独文件夹中，通过程序化方式加载所有JPG图片并使用JSX渲染。但当前代码无效果，控制台无任何输出（无错误也无日志）。

原代码如下：

原JS代码 #

// import { useState } from 'react'
import * as allFloofs from './assets/floofs/floofs'

function App() {
  // const [images, setImages] = useState(false)
  for (var i = 0; i < allFloofs.length; i++) {
    let src = `${allFloofs[i]}`;
    console.log(allFloofs[i])
    let floof = new Image();
    floof.src = src;
    querySelector.image - container.appendChild(floof);
  }


  return ( 
<div className = "App" >
    <div className = "image-container" >
    <div> {
      /*  <Floofs/>
          <Sleps/>
          <Snyks/>  */
    } 
      </div>
    </div>
 </div >
  )
}

export default App

原CSS代码 #

.App {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

h2 {
  text-align: center;
}

.image-container {
  width: 80%;
  margin-left: 10%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}

.image-container div:first-child {
  grid-column-start: 1;
  grid-column-end: 3;
}

.image-container div:last-child {
  grid-row-start: 2;
  grid-row-end: 5;
}

.image {
  width: 100%;
  height: 30px;
}

.image img {
  width: 40%;
  height: 40%;
}

:root {
  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

a {
  font-weight: 500;
  color: "#646cff";
  text-decoration: inherit;
}

a:hover {
  color: "#535bf2";
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}

button:hover {
  border-color: "#646cff";
}

button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
   :root {
    color: "#213547";
    background-color: "#ffffff";
  }
  a:hover {
    color: "#747bff";
  }
  button {
    background-color: "#f9f9f9";
  }
}

原HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/src/index.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title> 🐈 F.I.R 🐈 </title>
</head>

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>

</html>

目录结构：src/assets下包含floofs、sleps、snyks三个文件夹，每个文件夹内存放对应类别的JPG图片。

核心错误点 #

1. 图片导入方式错误：Vite无法通过import * as xxx from './folder'批量导入文件夹内的图片，这种方式拿到的不是有效路径数组，导致allFloofs.length为0，循环完全不执行，控制台无输出。
2. DOM操作逻辑错误：React组件应通过JSX声明式渲染内容，而非直接用querySelector操作DOM。且组件函数执行时，返回的JSX还未挂载到DOM，此时调用querySelector找不到目标元素，同时querySelector.image - container本身语法错误。
3. 逻辑位置错误：循环写在组件函数顶层、JSX返回之前，此时DOM尚未生成，操作DOM完全无效。

修复后的代码 #

1. 修正App.jsx（批量导入+JSX渲染）

function App() {
  // 使用Vite的import.meta.glob批量导入各类图片
  const floofImages = import.meta.glob('./assets/floofs/*.jpg', { eager: true, import: 'default' });
  const floofImageList = Object.values(floofImages);

  const slepImages = import.meta.glob('./assets/sleps/*.jpg', { eager: true, import: 'default' });
  const slepImageList = Object.values(slepImages);

  const snykImages = import.meta.glob('./assets/snyks/*.jpg', { eager: true, import: 'default' });
  const snykImageList = Object.values(snykImages);

  return (
    <div className="App">
      <h2>Floofs</h2>
      <div className="image-container">
        {floofImageList.map((src, index) => (
          <div key={index} className="image">
            <img src={src} alt={`floof-${index}`} />
          </div>
        ))}
      </div>

      <h2>Sleps</h2>
      <div className="image-container">
        {slepImageList.map((src, index) => (
          <div key={index} className="image">
            <img src={src} alt={`slep-${index}`} />
          </div>
        ))}
      </div>

      <h2>Snyks</h2>
      <div className="image-container">
        {snykImageList.map((src, index) => (
          <div key={index} className="image">
            <img src={src} alt={`snyk-${index}`} />
          </div>
        ))}
      </div>
    </div>
  );
}

export default App;

2. 修正CSS（调整图片显示样式）

原CSS中.image固定高度会压缩图片，建议修改为：

.image {
  width: 100%;
}

.image img {
  width: 100%;
  height: auto;
  /* 保持图片原始比例 */
}

关键说明 #

• import.meta.glob是Vite专属批量导入API，eager: true表示立即加载，import: 'default'用于获取图片的路径值。
• React通过map遍历图片数组生成JSX元素，每个元素需设置唯一key属性（示例用index临时替代，生产环境建议用图片文件名等稳定标识）。
• 遵循React声明式渲染原则，放弃直接操作DOM的方式，确保组件状态与DOM同步。

内容的提问来源于stack exchange，提问作者cloakandswagger