React中动态导入图片：使用require.context解决变量路径限制

// 硬编码路径可以正常工作
import image from '../../images/burgers/burger-1.png';
// 或者
<img src={require('../../images/burgers/burger-1.png')} />

// 变量路径会导致“Cannot find module”错误
// import("" + props.item.imageSource).then(...)
// 或者
// <img src={require(props.item.imageSource)} />

require.context(
  directory,         // 搜索的目录路径，必须是字面量字符串
  (useSubdirectories = true), // 是否搜索子目录，默认为 true
  (regExp = /^\.\/.*$/),     // 匹配文件的正则表达式，默认为匹配所有文件
  (mode = 'sync')          // 模块加载模式，如 'sync', 'eager', 'lazy', 'weak'
);

src/
├── App.js
├── index.js
└── images/
    ├── burger-1.png
    ├── pizza-2.jpg
    └── desserts/
        └── cake-3.gif

import React from 'react';

// 1. 创建图片上下文
// require.context('./images') 会在构建时扫描 src/images 目录
// 默认包含子目录，并匹配所有文件
const imagesContext = require.context('./images');

function DynamicImageGallery() {
  // 2. 使用 imagesContext.keys() 获取所有匹配图片的相对路径数组
  // 例如：['./burger-1.png', './pizza-2.jpg', './desserts/cake-3.gif']
  const imagePaths = imagesContext.keys();

  return (
    <main style={{ padding: '20px' }}>
      <h1>动态图片画廊</h1>
      {imagePaths.length > 0 ? (
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '15px', justifyContent: 'center' }}>
          {imagePaths.map(path => (
            // 3. 将路径传递给 imagesContext 函数，获取图片资源的 URL
            <div key={path} style={{ border: '1px solid #ddd', borderRadius: '8px', overflow: 'hidden', boxShadow: '0 2px 5px rgba(0,0,0,0.1)' }}>
              <img
                src={imagesContext(path)} // 获取图片URL
                alt={`动态图片: ${path}`}
                style={{ width: '200px', height: '150px', objectFit: 'cover', display: 'block' }}
              />
              <p style={{ margin: '8px', fontSize: '14px', color: '#555' }}>
                {path.replace('./', '')} {/* 显示文件名 */}
              </p>
            </div>
          ))}
        </div>
      ) : (
        <p>在指定目录下未找到任何图片。</p>
      )}
    </main>
  );
}

export default DynamicImageGallery;

import React from 'react';

// 创建上下文，指向所有图片的根目录
const allImagesContext = require.context('./images', true, /\.(png|jpe?g|svg|gif)$/);

function MenuItemCard(props) {
  const { item } = props;
  const [importedImage, setImportedImage] = React.useState(null);

  React.useEffect(() => {
    if (item && item.imageSource) {
      // 尝试找到匹配的图片路径
      const foundPath = allImagesContext.keys().find(key => key.includes(item.imageSource));
      if (foundPath) {
        setImportedImage(allImagesContext(foundPath));
      } else {
        console.warn(`图片 ${item.imageSource} 未在上下文中找到。`);
        setImportedImage(null); // 或者设置为默认图片
      }
    }
  }, [item]); // 当item变化时重新查找图片

  return (
    <div className="menuItemCard">
      {importedImage ? (
        <img src={importedImage} alt={item?.name || "菜单项"} style={{ width: '100px', height: '100px', objectFit: 'cover' }} />
      ) : (
        <div style={{ width: '100px', height: '100px', background: '#f0f0f0', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          图片加载失败
        </div>
      )}
    </div>
  );
}

export default MenuItemCard;