javascript - 如何访问本地 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`)}

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

ps 我建议你重构你的变量名（使用 camelCase）