javascript - 基于状态的图像加载

Question

我想根据从 API 调用获得的状态加载图像。例如，如果 API 给我'1'，我想加载1.png. 不幸的是，我收到了上述错误。

这是我的代码

let img = info.WeatherIcon ? require(`../../img/icons/${info.WeatherIcon}.png`) : require('../../img/icons/7.png')
< Image style = {{ width:120, height:120}} source = { img } /> 

Answer 1

您不能使用动态链接。根据 React-Native，在编译包之前需要加载所有图像源。

所以改变你的代码如下，

let img =
  info.WeatherIcon == "1"
    ? require("../../img/icons/1.png")
    : require("../../img/icons/7.png");

然后你可以渲染你的Image

<Image style={{ width: 120, height: 120 }} source={img} />

对于更复杂的示例，您可以使用如下条件，

switch (info.WeatherIcon) {
  case "1":
    return require("../../img/icons/1.png");
  case "2":
    return require("../../img/icons/2.png");
  case "3":
    return require("../../img/icons/3.png");
  default:
    return require("../../img/icons/7.png");
}

希望这对您有所帮助。随意质疑