React中如何通过图片文件名前缀的唯一代码加载指定图片？

Got it, let's figure out how to fix this image loading issue in your React project. The main problem here is that you only have the unique code prefix (like '10000'), but the actual image filenames have extra suffixes you don't have upfront—and Webpack's require system needs a clear path to resolve files, especially when dealing with a large library of images.

Here are two robust solutions tailored for large-scale image scenarios:

Option 1: Pre-Generate an Image Mapping File (Recommended for Large Image Libraries) #

This approach creates a static JSON map of code prefixes to full image filenames during your build process. It's efficient because it lets Webpack only bundle the images you actually use, and it's easy to maintain.

Step 1: Create a Script to Generate the Map #

Make a new file generate-image-map.js in your project root:

const fs = require('fs');
const path = require('path');

// Point to your assets folder
const assetsDir = path.resolve(__dirname, './src/assets');
const imageMap = {};

// Iterate over all files in assets
fs.readdirSync(assetsDir).forEach(file => {
  // Skip retina (@2x) versions and non-png files
  if (!file.includes('@2x') && file.endsWith('.png')) {
    // Extract the unique code prefix (e.g., '10000' from '10000_clear_large.png')
    const codePrefix = file.split('_')[0];
    // Map the prefix to the full filename
    imageMap[codePrefix] = file;
  }
});

// Write the map to a JSON file
fs.writeFileSync(
  path.resolve(__dirname, './src/image-map.json'),
  JSON.stringify(imageMap, null, 2)
);

Step 2: Add the Script to Your Build Process #

Update your package.json to run this script before every build:

{
  "scripts": {
    "prebuild": "node generate-image-map.js",
    "prestart": "node generate-image-map.js",
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

This ensures the map stays up-to-date whenever you add/remove images.

Step 3: Update Your Image Components #

Modify Image.js to use the mapping file:

import imageMap from './image-map.json';

export default function Image({ code, altImage }) { 
  // Get the full filename from the map, or use a default if missing
  const fileName = imageMap[code];
  const imageSrc = fileName 
    ? require(`./assets/${fileName}`) 
    : require('./assets/default-fallback.png'); // Add a fallback image

  return <img src={imageSrc} alt={altImage} /> 
}

Update ImageContainer.js to fix the infinite re-render issue and pass the code correctly:

import { useState, useEffect } from 'react'; 
import useFetchData from './fetch-data.js'; 
import Image from './Image.js'; 

export default function ImageContainer() { 
  const [code, setCode] = useState(''); 
  const data = useFetchData(); 

  // Use useEffect to avoid infinite re-renders when data updates
  useEffect(() => {
    if (data?.code) {
      setCode(data.code);
    }
  }, [data]);

  return <Image code={code} altImage='weather icon' /> 
}

Option 2: Use Webpack's Context API (No Extra Script Needed) #

If you prefer not to maintain a separate script, Webpack's require.context lets you dynamically search for images matching your prefix pattern.

Update Image.js like this:

// Create a Webpack context to scan your assets folder for PNGs
const imagesContext = require.context('./assets', false, /^[0-9]+_.+\.png$/);

export default function Image({ code, altImage }) { 
  // Filter files to find the one matching the code (and skip @2x versions)
  const matchingFiles = imagesContext.keys().filter(filePath => {
    const fileName = filePath.split('/')[1];
    const filePrefix = fileName.split('_')[0];
    return filePrefix === code && !fileName.includes('@2x');
  });

  // Get the image source, or fall back to a default
  const imageSrc = matchingFiles.length > 0
    ? imagesContext(matchingFiles[0])
    : require('./assets/default-fallback.png');

  return <img src={imageSrc} alt={altImage} /> 
}

This works because Webpack will bundle all images matching the regex during build, and you can dynamically pick the one you need at runtime.

Key Notes #

• Error Handling: Always include a fallback image for cases where a code doesn't match any image—this prevents broken image links and console errors.
• Retina Support: If you want to load @2x images for high-DPI screens, you can extend either solution to check window.devicePixelRatio and pick the appropriate file.
• Performance: Both solutions are optimized for large image libraries. The mapping file approach bundles only used images, while require.context bundles all matching images (but Webpack will still optimize them).

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