如何访问本地 JSON 数组中的图像

Question

Hijama = [
{
  name: 'Body Back',
  pic: '../Images/BackSide.png',
},
{
  name: 'Body Front',
  pic: '../Images/images.jpg',
},];

//这里我要渲染我的照片

     render_swiper_data = () => {
return this.Hijama.map((item, index) => {
  console.log('check', item);
  return (
    <View key={index}>
      <Text>{item.name}</Text>
      <Image
        source={require(item.pic)}
        style={{
          height: '100%',
          width: '100%',
        }}
      />
    </View>
  );
})};

//现在我的问题是如何访问这些图像我尝试了 Require 和 uri,

Answer 1

你不能那样使用 require。 react-native 无法读取它。所以你必须像这样存储所有本地图像位置：

Hijama = [
{
  name: 'Body Back',
  pic: require('../Images/images.jpg'),
},
{
  name: 'Body Front',
  pic: require('../Images/images2.jpg')
},];

然后在您的代码中使用它：

     render_swiper_data = () => {
return this.Hijama.map((item, index) => {
  console.log('check', item);
  return (
    <View key={index}>
      <Text>{item.name}</Text>
      <Image
        source={item.pic}
        style={{
          height: '100%',
          width: '100%',
        }}
      />
    </View>
  );
})};

Answer 2

如果所有图像中都有一些常量，您可以使用模板文字。

src={require(`./Images/${image}.png`)}

并在您的 Hijama 循环中制作 ${image}。

p.s。我建议你重构你的变量名（使用驼峰式）

如何访问本地 JSON 数组中的图像

How to Access Image in local JSON Array

javascript

arrays

json

react-native

react-native-swiper