基于状态的图像加载

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

}

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