映射数组并渲染图像时图片未显示

Question

我在项目中有一个图片数组。

this.state.destinations = [{
    "destinationId": "001",
    "img": "../../assets/img/destinations/001.png"
  },
  {
    "destinationId": "002",
    "img": "../../assets/img/destinations/002.png"
  },
  {
    "destinationId": "003",
    "img": "../../assets/img/destinations/003.png"
  }]
}

我正在尝试将它们中的每一个重复放置在一个视图中的图像组件中，如下所示：

render() {

    var {navigate} = this.props.navigation;

    return (
        <LinearGradient 
          colors={['#514A9D', '#24C6DC']} start={[0.0, 0.5]} end={[1.0, 0.5]} locations={[0.0, 1.0]} style={{flex:1}}>
            <ScrollView>
              {
                <View style={{paddingTop: 24}}>
                  {
                    this.state.destinations.map(dest => {
                      return <Image style={{height: 200, width: 600}} key={dest.destinationId} source={require(dest.img)} resizeMode="contain" />
                    })
                  }
                </View>
              }
            </ScrollView>
        </LinearGradient>
    );
  }

但当我尝试运行时，我的手机出现了一些疯狂的错误：

我在expo中尝试运行应用程序，只是在react-native模式下开发，而不是在react-native-init模式下。

- Paulo Henrique Junior

Answer 1

尝试以以下方式重构代码，将require的使用直接移动到定义数据的位置，以便正确评估静态资源路径。

this.state.destinations = [{
    "destinationId": "001",
    "img": require("../../assets/img/destinations/001.png")
  },
  {
    "destinationId": "002",
    "img": require("../../assets/img/destinations/002.png")
  },
  {
    "destinationId": "003",
    "img": require("../../assets/img/destinations/003.png")
  }]
}

然后更新你渲染<Image />的方式，删除对require()的调用，直接引用dest.img:

this.state.destinations.map(dest => {
  return <Image source={dest.img}
           key={dest.destinationId}
           style={{height: 200, width: 600}} 
           resizeMode='contain' />
})

希望这可以帮助到您！

- Dacre Denny

---

你救了我的一天！不过这应该被视为图像来源的一个错误。它解析了一个字符串，但没有解析require()内部的映射字符串...行为很奇怪。 - lortschi

你真是救了我一命！不过这应该被视为图像源的一个错误。它解析了一个字符串，但没有解析require()内的映射字符串...行为很奇怪。 - undefined

@lortschi很高兴我能帮到你 :) - Dacre Denny

@lortschi 很高兴我能帮到你 :) - undefined

Answer 2

动态图片导入：

"img": require("../../assets/img/destinations/001.png")
<Image source={dest.img} />

Expo链接：代码

- Vinayak Bagaria