如何在Parcel.js中动态加载构建时未知名称的图片？有无替代require.context的方案？

Great question! Let's break this down step by step.

First off, your dynamic path approach isn't "wrong" per se—but it clashes with how Parcel handles asset resolution. Here's why that error happens, plus solutions for dynamic image loading and a stand-in for webpack's require.context.

Why the dynamic require throws an error #

Parcel uses static analysis at build time to find and bundle assets. When you write require('../images/Image4.jpg'), Parcel can clearly see the exact file path during compilation and includes it in the bundle. But when you use a dynamic expression like require('../images/' + imgName + '.jpg'), Parcel can't predict all possible imgName values ahead of time. It has no way to know which images to bundle, so it throws that "Cannot find module" error.

How to dynamically load images in Parcel #

There are a few reliable ways to handle this depending on your use case:

1. Use an object map for small sets of images #

If you only have a handful of images, import them all upfront and map their names to their imported paths:

// Import all your images first
import Image1 from '../images/Image1.jpg';
import Image2 from '../images/Image2.jpg';
import Image4 from '../images/Image4.jpg';

// Create a map of image names to their paths
const imageAssets = {
  Image1,
  Image2,
  Image4
};

// Then use it dynamically
const imgName = "Image4";
return <img src={imageAssets[imgName]} alt="" />;

This is simple, straightforward, and works great for limited image collections.

2. Use dynamic import() for lazy loading #

If you have lots of images or want to lazy-load them (to reduce initial bundle size), use Parcel's support for dynamic import():

import { useState, useEffect } from 'react';

const DynamicImage = ({ imgName }) => {
  const [imgSrc, setImgSrc] = useState('');

  useEffect(() => {
    // Dynamically import the image when the component mounts (or when imgName changes)
    const loadImage = async () => {
      const imageModule = await import(`../images/${imgName}.jpg`);
      setImgSrc(imageModule.default);
    };

    loadImage();
  }, [imgName]);

  return imgSrc ? <img src={imgSrc} alt="" /> : <div>Loading...</div>;
};

// Usage: <DynamicImage imgName="Image4" />

Parcel will bundle all images matching the pattern ../images/*.jpg, but only load the specific one when import() is called. Perfect for performance-heavy apps.

Parcel equivalent to webpack's require.context #

Parcel doesn't have a direct require.context API, but you can achieve the same bulk-import behavior using glob imports:

// Import all .jpg files in the ../images directory
// Parcel will generate an object where keys are filenames (without extensions) and values are the image paths
import * as imageLibrary from '../images/*.jpg';

// Use it dynamically
const imgName = "Image4";
return <img src={imageLibrary[imgName]} alt="" />;

This works exactly like require.context for bulk asset loading—Parcel scans the directory at build time, bundles all matching images, and lets you access them by name.

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