如何根据登录用户ID动态导入对应名称的图片？

在React中，静态import语句是编译时执行的，没法直接用运行时获取的userid拼接路径。你可以用以下几种方法实现动态加载：

方法1：使用require动态加载 #

如果图片放在src目录下（比如你的../image路径），可以用require在拿到userid后动态生成图片路径：

import React, { useState, useEffect } from 'react'

const [userid, setUserid] = useState(null);
const [userAvatar, setUserAvatar] = useState(null);

useEffect(() => {
    (async () => {
        try {
            const resp = await httpClient.get("//localhost:5000/@me");
            const userId = resp.data.id;
            setUserid(userId);
            // 动态加载图片，同时处理图片不存在的情况
            try {
                const avatar = require(`../image/${userId}.png`);
                setUserAvatar(avatar.default);
            } catch (err) {
                setUserAvatar(require('../image/default.png').default);
            }
        } catch (error) {
            console.log("Not authenticated");
        }
    })();
}, []);

// 渲染组件
return (
    <div>
        {userAvatar && <img src={userAvatar} alt="User Avatar" />}
    </div>
)

方法2：使用动态import()函数 #

ES模块的动态import()支持异步加载模块，适合需要按需加载的场景：

import React, { useState, useEffect } from 'react'

const [userid, setUserid] = useState(null);
const [userAvatar, setUserAvatar] = useState(null);

useEffect(() => {
    const fetchUserAndAvatar = async () => {
        try {
            const resp = await httpClient.get("//localhost:5000/@me");
            const userId = resp.data.id;
            setUserid(userId);
            try {
                const avatarModule = await import(`../image/${userId}.png`);
                setUserAvatar(avatarModule.default);
            } catch (err) {
                const defaultAvatar = await import('../image/default.png');
                setUserAvatar(defaultAvatar.default);
            }
        } catch (error) {
            console.log("Not authenticated");
        }
    };

    fetchUserAndAvatar();
}, []);

return (
    <div>
        {userAvatar && <img src={userAvatar} alt="User Avatar" />}
    </div>
)

方法3：将图片放在public目录下 #

如果把图片放在项目的public/image文件夹下，可以直接通过URL路径拼接，不需要import或require：

import React, { useState, useEffect } from 'react'

const [userid, setUserid] = useState(null);

useEffect(() => {
    (async () => {
        try {
            const resp = await httpClient.get("//localhost:5000/@me");
            setUserid(resp.data.id);
        } catch (error) {
            console.log("Not authenticated");
        }
    })();
}, []);

return (
    <div>
        {userid ? (
            <img 
                src={`/image/${userid}.png`} 
                alt="User Avatar" 
                onError={(e) => {
                    // 图片加载失败时替换为默认头像
                    e.target.src = '/image/default.png';
                }} 
            />
        ) : null}
    </div>
)

注意事项 #

• 所有方法都建议处理图片不存在的情况，避免页面出现破损的图片占位符。
• 如果使用src目录下的图片，确保你的构建工具（如webpack）已经配置好图片资源的处理逻辑（create-react-app默认已配置）。

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