ReactJS Redux 从变量动态加载图像答案

【问题标题】：ReactJS Redux Loading Image Dynamically from VariableReactJS Redux 从变量动态加载图像
【发布时间】：2019-02-27 10:04:21
【问题描述】：

我目前正在处理一个 React + Redux 项目，并希望使用语言消息来呈现图像。

问题是，由于图片名称是动态的（因为语言切换），我无法使用require(imageVar)来加载图片。

我目前正在使用的是这个（这是在 render() 函数内部）：

FormattedMessage {...messages.fullLogo}>
        {
          (fullLogo) => <Img src={require(`${fullLogo}`)} alt="Banner" />
        }
</FormattedMessage>

理论上这应该从 url 加载图像（是的，fullLogo 是图像的完整 url）。

我在 src={} 中尝试的是：

require(`${fullLogo}`)
require(fullLogo)
require("" + fullLogo)
require(String(fullLogo))
require(fullLogo.toString())

每次我尝试其中一个（除了第三个 - 给我一个致命错误）我都会收到一个 "Could not Load Module './img/image.png'" 错误。

我猜这意味着，名称确实加载但需要以某种方式无法访问该变量。

但是，如果我将路径直接放入 require() 函数中。它成功加载了图像。

我不想要这个。我希望它动态加载它。

也许你们对此有一些经验。

提前致谢！

PS：如果您需要任何额外的代码，请告诉我！

【问题讨论】：

你不需要使用require。
@George 那我应该用什么？
把url放到src里就行了。如果您在本地存储图像，则使用 Require。
src 只是一个url，如果你写一个react-native 项目那么你需要使用require。
@George 我在本地有它。可能是个误会。我必须在本地拥有它

标签： reactjs redux react-redux message boilerplate

【解决方案1】：

You can't dynamically require files by variable at runtime，因为require 发生在运行时之前，当您将应用程序捆绑在一起时（例如使用 webpack）。

根据打包程序的工作方式，这对于 require 来说是不可能的。打包在运行前发生一次，因此这些变量还没有值。

语言切换是什么意思？ message.fullLogo 包含什么？如果它包含一个 url，只需使用该 url 而不需要：

【讨论】：

使用 url 而不是 require 还需要将图像移动到公用文件夹而不是源文件夹，这可能需要一点构建器 OP 使用的配置。