React自定义Hook实现：检测目录非空且包含指定图片

直接修改代码，通过静态导入默认图片并在动态导入失败时回退到它，就能实现需求：

import { useState, useEffect } from 'react';
import { brand, country } from '../resources';
// 导入全局默认图片，替换为你的实际路径
import globalDefaultImage from '../dir/images/default.png';

const useImgFromDir = (fileName: string) => {
  // 初始状态设为默认图，避免首次渲染空白
  const [image, setImage] = useState<string>(globalDefaultImage);

  useEffect(() => {
    const importFile = async () => {
      try {
        const importedImage = await import(`../dir/images/${brand}/${country}/${fileName}.png`);
        // 导入成功则更新为目标图片
        setImage(importedImage.default);
      } catch (error) {
        // 图片不存在时切换为默认图
        setImage(globalDefaultImage);
        // 可选：打印日志方便调试缺失的图片
        console.warn(`未找到图片 ${fileName}.png，使用默认图`, error);
      }
    };

    importFile();
  }, [brand, country, fileName]);

  return image;
};

export default useImgFromDir;

关键修改说明 #

• 预先导入默认图：确保默认图片能被打包工具正确解析，不会出现加载失败的情况
• 初始状态设为默认图：避免组件首次渲染时出现空白
• catch块回退逻辑：当目标图片不存在（动态导入抛出错误）时，自动切换到默认图
• 可选错误日志：调试时能快速定位缺失的图片资源

如果需要针对不同品牌/国家设置专属默认图，可以在catch块中嵌套动态导入，确保兜底逻辑更灵活：

catch (error) {
  try {
    // 先尝试当前市场的默认图
    const marketDefault = await import(`../dir/images/${brand}/${country}/default.png`);
    setImage(marketDefault.default);
  } catch {
    // 市场默认图也不存在时，用全局默认图
    setImage(globalDefaultImage);
  }
}

注意：动态导入的路径需要是打包工具可静态分析的，brand和country建议用固定枚举值而非完全动态的字符串，否则webpack等工具可能无法预编译图片资源。

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