React中动态导入图片：require.context 的高效实践

// 尝试动态导入（通常会失败）
function MenuItemCard(props) {
  const [importedImage, setImportedImage] = useState(null);

  useEffect(() => {
    // 这里的props.item.imageSource是一个变量，Webpack在构建时无法确定其具体值
    import("" + props.item.imageSource)
      .then((image) => setImportedImage(image.default))
      .catch(error => console.error("图片导入失败:", error));
  }, [props.item.imageSource]); // 依赖项应包含props.item.imageSource

  return (
    <div className="menuItemCard">
      {importedImage && <img src={importedImage} alt={props.item.name} />}
    </div>
  );
}

// 尝试动态require（同样会失败）
function MenuItemCard(props) {
  return (
    <div className="menuItemCard">
      {/* 这里的props.item.imageSource是一个变量 */}
      <img src={require(props.item.imageSource)} alt={props.item.name} />
    </div>
  );
}

// 硬编码路径可以正常工作
import("../../images/burgers/burger-1.png").then((image) => /* ... */);
// 或者
require("../../images/burgers/burger-1.png");

require.context(
  directory,         // 1. 要搜索的目录
  (useSubdirectories = true), // 2. 是否搜索子目录 (默认为 true)
  (regExp = /^\.\/.*$/),     // 3. 匹配文件的正则表达式 (默认为 /^\.\/.*$/，匹配所有文件)
  (mode = 'sync')          // 4. 模块的加载模式 ('sync', 'lazy', 'eager', 'weak'，默认为 'sync')
);

import React, { useState, useEffect } from 'react';

// 创建一个上下文，从 './images' 目录中导入所有图片（包括子目录）
// imagesContext 函数可以接收一个相对路径作为参数，并返回对应的模块
const imagesContext = require.context('./images', true, /\.(png|jpe?g|gif|svg)$/);

// 缓存已加载的图片，避免重复处理
const loadedImages = {};
imagesContext.keys().forEach((path) => {
  // path 类似于 './burgers/burger-1.png'
  // imagesContext(path) 会解析并返回图片的模块
  loadedImages[path] = imagesContext(path);
});

export default function MenuItemCard({ item }) {
  const [currentImageSrc, setCurrentImageSrc] = useState(null);

  useEffect(() => {
    // 假设 item.imageSource 是一个相对于 images 目录的路径，例如 'burgers/burger-1.png'
    // 我们需要将其转换为 './burgers/burger-1.png' 格式以匹配 keys() 的输出
    const relativePath = `./${item.imageSource}`;

    if (loadedImages[relativePath]) {
      setCurrentImageSrc(loadedImages[relativePath]);
    } else {
      console.warn(`未找到图片: ${relativePath}`);
      // 可以设置一个默认图片或错误处理
      setCurrentImageSrc('/path/to/default-image.png'); 
    }
  }, [item.imageSource]);

  return (
    <div className="menuItemCard">
      {currentImageSrc ? (
        <img src={currentImageSrc} alt={item.name} />
      ) : (
        <span>加载中或图片缺失...</span>
      )}
      <h3>{item.name}</h3>
      <p>{item.description}</p>
    </div>
  );
}

// 示例用法
function App() {
  const menuItems = [
    { id: 1, name: '经典汉堡', description: '美味多汁', imageSource: 'burgers/burger-1.png' },
    { id: 2, name: '芝士汉堡', description: '双层芝士', imageSource: 'burgers/burger-2.png' },
    // 更多项目...
  ];

  return (
    <main>
      <h1>菜单</h1>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
        {menuItems.map(item => (
          <MenuItemCard key={item.id} item={item} />
        ))}
      </div>
    </main>
  );
}