基于状态的图像加载

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");
}

希望对您有所帮助。有疑问欢迎留言

基于状态的图像加载

Image Load based on state

javascript

react-native

react-native-image