React动态图片导入：require.context的深度解析与应用

// 尝试动态导入（失败）
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // 这里的 props.item.imageSource 是一个变量，例如 "../../images/burgers/burger-1.png"
    // 这种方式会抛出 "Cannot find module" 错误
    import("" + props.item.imageSource).then((image) =>
      setImportedImage(image.default)
    );
  }, [props.item.imageSource]); // 添加依赖项

  return (
    <div className="menuItemCard">
      {importedImage && <img src={importedImage} alt="Menu Item" />}
    </div>
  );
}

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

// 硬编码路径导入（成功）
import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // 硬编码路径可以正常工作
    import("../../images/burgers/burger-1.png").then((image) =>
      setImportedImage(image.default)
    );
  }, []);

  return (
    <div className="menuItemCard">
      {importedImage && <img src={importedImage} alt="Menu Item" />}
    </div>
  );
}

// 硬编码路径 require（成功）
function MenuItemCard(props) {
  return (
    <div className="menuItemCard">
      {/* 硬编码路径可以正常工作 */}
      <img src={require("../../images/burgers/burger-1.png")} alt="Menu Item" />
    </div>
  );
}

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

src/
├── App.js
├── components/
│   └── MenuItemCard.js
├── images/
│   ├── burgers/
│   │   ├── burger-1.png
│   │   └── burger-2.png
│   └── drinks/
│       └── soda.png
└── utils/
    └── imageLoader.js

// src/utils/imageLoader.js
const imageContext = require.context('../images', true, /\.(png|jpe?g|gif|svg)$/);

const imageMap = {};
imageContext.keys().forEach(key => {
    // key 的格式通常是 './burgers/burger-1.png'
    // 我们将其标准化为 'burgers/burger-1.png' 作为 map 的键
    const normalizedKey = key.replace('./', '');
    imageMap[normalizedKey] = imageContext(key); // 调用上下文函数以获取图片的URL
});

/**
 * 根据相对路径获取图片URL。
 * @param {string} relativePath - 图片相对于 src/images 目录的路径，例如 'burgers/burger-1.png'。
 * @returns {string|undefined} 图片的URL，如果未找到则为 undefined。
 */
export const getImageUrl = (relativePath) => {
    return imageMap[relativePath];
};

// 也可以直接导出上下文函数，但使用 getImageUrl 封装更清晰
// export const getImageContext = () => imageContext;

// src/components/MenuItemCard.js
import React, { useState, useEffect } from 'react';
import { getImageUrl } from '../utils/imageLoader'; // 导入图片加载工具

function MenuItemCard(props) {
  const [imageUrl, setImageUrl] = useState(null);

  useEffect(() => {
    if (props.item && props.item.imageSource) {
      // 假设 props.item.imageSource 的值是 'burgers/burger-1.png'
      // 这里的路径需要与 imageLoader.js 中 require.context 的相对路径匹配
      const url = getImageUrl(props.imageSource);
      setImageUrl(url);
    }
  }, [props.imageSource]); // 依赖项为 imageSource

  return (
    <div className="menuItemCard">
      {imageUrl ? <img src={imageUrl} alt={props.item?.name || "Menu Item"} /> : <p>Loading image...</p>}
    </div>
  );
}

export default MenuItemCard;

// src/App.js
import React from 'react';
import MenuItemCard from './components/MenuItemCard';

function App() {
  const menuItems = [
    { id: 1, name: 'Classic Burger', imageSource: 'burgers/burger-1.png' },
    { id: 2, name: 'Veggie Burger', imageSource: 'burgers/burger-2.png' },
    { id: 3, name: 'Soda', imageSource: 'drinks/soda.png' },
  ];

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

export default App;