React中如何优先导入PNG图片，不存在则导入JPG？

你遇到的问题本质是Webpack 等打包工具在编译阶段会解析所有 require 调用，不管代码是否在 try/catch 块里。所以即使 PNG 文件存在，打包器还是会尝试解析 JPG 文件的路径，找不到就直接抛出编译错误，不会等到运行时进入 catch 逻辑。

下面是几种可行的解决方法：

方法一：使用 require.context 预加载目录内图片（静态路径场景） #

如果你的图片都放在同一个目录下，可以用 require.context 提前打包该目录下所有符合格式的图片，运行时再判断目标文件是否存在：

// 假设图片存放在 src/images 目录下，根据实际路径调整
const imageContext = require.context('../images', false, /\.(png|jpg)$/);

let Card = '';
try {
  // 传入图片相对目录的路径
  Card = imageContext('./card.png');
} catch (_) {
  try {
    Card = imageContext('./card.jpg');
  } catch (__) {
    Card = '';
  }
}

require.context 会在编译时打包指定目录下所有匹配正则的文件，运行时通过文件名查找对应的模块，不会因为文件不存在抛出编译错误。

方法二：动态导入 import()（异步场景） #

动态导入是运行时解析模块，编译阶段不会强制检查文件是否存在，适合需要异步加载的场景：

import { useState, useEffect } from 'react';

function CardComponent() {
  const [cardImage, setCardImage] = useState('');

  useEffect(() => {
    async function loadTargetImage() {
      try {
        // 优先加载 PNG
        const pngModule = await import('./images/card.png');
        setCardImage(pngModule.default);
      } catch {
        // PNG 不存在则加载 JPG
        try {
          const jpgModule = await import('./images/card.jpg');
          setCardImage(jpgModule.default);
        } catch {
          // 两者都不存在时设为空
          setCardImage('');
        }
      }
    }
    loadTargetImage();
  }, []);

  return <img src={cardImage} alt="Card" />;
}

注意：动态导入是异步的，所以需要用状态管理加载结果，初始值为空时可以添加加载提示。

方法三：配置 Webpack 扩展名解析顺序（全局生效） #

如果希望所有导入都优先尝试 PNG 再 JPG，可以修改 Webpack 配置，调整扩展名解析顺序：
在 webpack.config.js 中添加：

module.exports = {
  resolve: {
    // 按顺序尝试扩展名，优先匹配 PNG
    extensions: ['.png', '.jpg', '.js', '.jsx']
  }
};

之后直接导入图片即可，打包器会自动按顺序查找：

import Card from './images/card';

⚠️ 注意：如果 PNG 和 JPG 都不存在，还是会抛出编译错误，适合确定至少有一个文件存在的场景。

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