React中Webpack不允许动态导入图片的问题求助

问题原因 #

Webpack依赖静态分析确定打包资源，使用完全动态的import(fileName)时，它无法提前识别要打包的图片范围，因此抛出Critical dependency: the request of a dependency is an expression错误。另外原Hook中直接将import返回的模块对象赋值给image也存在问题，图片实际路径在模块的default属性中。

可行解决方案 #

方案1：给动态导入添加静态前缀 #

通过固定路径前缀，让Webpack明确资源范围，同时修正路径获取方式：

修改useImage.js：

import React from 'react'

const useImage = (fileName) => {
    const [loading, setLoading] = React.useState(true)
    const [error, setError] = React.useState(null)
    const [image, setImage] = React.useState(null)

    React.useEffect(() => {
        const fetchImage = async () => {
            try {
                // 固定@images前缀，仅动态传入相对路径部分
                const response = await import(`@images/${fileName}`)
                // 取模块default属性作为图片实际路径
                setImage(response.default)
            } catch (err) {
                setError(err)
            } finally {
                setLoading(false)
            }
        }

        fetchImage()
    }, [fileName])

    return {
        loading,
        error,
        image,
    }
}

export default useImage;

调用Hook时传入相对@images的路径：

const {loading, error, image} = useImage("JavaScript Practice/main.png");

方案2：使用Webpack的require.context预加载图片 #

通过require.context批量注册指定目录下的所有图片，Webpack会提前打包这些资源，后续可直接通过文件名获取路径：

修改useImage.js：

import React from 'react'

// 创建图片上下文，匹配@images下所有常见图片格式文件
const imageContext = require.context('@images', true, /\.(png|jpe?g|gif|svg)$/);

const useImage = (fileName) => {
    const [loading, setLoading] = React.useState(true)
    const [error, setError] = React.useState(null)
    const [image, setImage] = React.useState(null)

    React.useEffect(() => {
        try {
            // 通过上下文直接获取图片路径
            const imagePath = imageContext(`./${fileName}`)
            setImage(imagePath)
        } catch (err) {
            setError(err)
        } finally {
            setLoading(false)
        }
    }, [fileName])

    return {
        loading,
        error,
        image,
    }
}

export default useImage;

调用方式和方案1一致，传入相对@images的路径即可。

方案3：静态导入（适合固定图片） #

如果图片路径是固定的，直接在组件中静态导入是最简单的方式，无需动态Hook：

import React from "react";
import "@styles/project.css";
import mainImage from "@images/JavaScript Practice/main.png";

const Project = ({project}) => {
    return (
        <div className="project">
            <img src={mainImage} className="project__img" alt="Image of the product" id="image" />
        </div>
    )
}

export default Project;

注意事项 #

• 确保@images等路径别名已在Webpack配置或jsconfig.json/tsconfig.json中正确配置，避免路径解析错误。
• 方案1和方案2中，Webpack会打包指定目录下的所有匹配图片，注意控制资源体积，避免不必要的打包。

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