Загрузка изображения в зависимости от состояния

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

Вы не можете использовать динамические c ссылки. Согласно 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");
}

Надеюсь, это вам поможет. Не стесняйтесь сомнений