在 React 中使用 require 动态加载图像具有不同的行为

Question

我有一个场景，我想根据父组件传递的所需图像动态告诉子组件显示哪个图像，如下所示：

家长：

function Social() {
    return (
        <SocialBar>
            {
                SocialMedias.map((media) =>{
                    return <SocialApp 
                        key={uuidv4()}
                        link={media.link}
                        social={require(media.icon)}
                    />
                })
            }
        </SocialBar>
    );
}

孩子

function SocialApp(props) {
    return (
        <Social href={props.link} target="_blank">
            <CustomSizedImage src={props.social.default} />
        </Social>
    );
}

这看起来很简单，对吧？ 但是，这会导致以下错误：

我看过一些帖子说这是因为路径不是绝对的。 但是，我用绝对路径进行了测试，它仍然不起作用。 有趣的是，当我将父代码更改为下面进行测试时，它起作用了。

新的父代码：

function Social() {
    const img = require("../assets/icons/social-media/instagram.svg");
    return (
        <SocialBar>
            {
                SocialMedias.map((media) =>{
                    return <SocialApp 
                        key={uuidv4()}
                        link={media.link}
                        social={img}
                    />
                })
            }
        </SocialBar>
    );
}

export default Social;

结果：

OBS：我测试了此代码可能加载的每个图像。 不是图像/图像路径相关的问题。

所有这一切的预期是使用正确的 URL 等动态加载社交媒体的图标。我不明白的是：为什么当我需要返回之外的图像时它会起作用？ . 我知道我可以通过在 return 之外迭代media对象并将结果数组与地图索引一起使用来完成这项工作，但这似乎并不干净。 为什么会有这种行为？ 有没有办法让它在地图内工作？

Answer 1

您的最后一个代码片段有效，因为该路径在编译时是已知的。

我假设您使用 Webpack 或类似的打包程序。 当他们编译你的项目时，他们会检查所有的导入(including require calls) ，使用它来计算依赖树，最后将所有需要的文件捆绑在一起。 对于图像，这包括“将其编译为模块”，该模块仅返回图像的路径。

通常这还涉及用模块标识符替换路径。 例如，如果你曾经看过构建的 Webpack 代码，你会注意到它没有使用例如require('./module')而是__webpack_require.c(5)或类似的东西。 它在捆绑代码中为模块'./module'了唯一的 ID 5 。

使用您之前的代码片段，当使用带有非常量字符串的动态 require 时，Webpack 只是不知道您会请求该图像。 它也不知道用于此目的的新唯一 ID。

最简单的解决方案是在某处导入图像并动态使用这些引用：

// images.ts
export IconA from './media/icon-a.svg';
export IconB from './media/icon-b.svg';

// somewhere else
import { IconA, IconB } from './images';
const iconPath = someCondition ? IconA : IconB;

---

当然，您不必使用 import/require 机制。 您可以简单地将图标路径设为相对于您的public/文件夹的实际路径。