如何在本机反应中显示来自变量的图像

Question

我有 object 数组，在 object 中是字符串，它是图像的路径

  var [data, setData] = useState([
        {
            src: "../assets/image.jpg",
        },
        {
            src: "../assets/image2.jpg",
        },
    ])
  return (
  <SafeAreaView>
      <View>
          {data.map(image => {
              return(<View>
                      <Image source={require(image.src)} /> //THIS DOESNT WORK 
                  </View>)
          })}
      </View>
    </SafeAreaView>
  );
}

这项工作require('../assets/image.jpg') ，但我想从数据中获取 src - 我试过这个 ---- source={{uri: ``${user.src}`}} - --- 它不起作用-------------------------------------------- ------------- 以及如何显示来自 web 的图像不在项目文件夹中（例如： https://static.kupindoslike.com/slika-konj-_slika_O_80128845.jpg ）

Answer 1

使用 FlatList 渲染项目数组，它具有延迟加载，因此在您使用大量数据时会很好。

在您的情况下，使用此代码，它将正常工作：

  var [data, setData] = useState([
        {
            id: 1,
            src: require("../assets/image.jpg"),
        },
        {
            id: 2,
            src: require("../assets/image2.jpg"),
        },
    ])
  return (
 <SafeAreaView>
   <FlatList
       data={data}
       showsVerticalScrollIndicator={false}
       renderItem={({item}) => (
            <Image
             source={item.src}
             style={styles.imageStyle}
            />
       )}
       keyExtractor={item => item.id.toString()}
     />
  </SafeAreaView>

Answer 2

有这个问题，我这样解决了

../src/assets/images -> 创建 index.js 文件并将图像添加到images文件夹中。 你的 index.js 应该是这样的

import firstImg from "./image_1.png";
import secondImg from "./image_2.png";

const images = {
  firstImg,
  secondImg,
};

export default images;

然后，在您的组件中，导入 images.js 并创建您的 object。

import images from "../../assets/images";

const imagesBlock = [
    {
       imgSrc: images.firstImage
    },
    {
       imgSrc: images.secondImage
    }
]

然后使用.map() function。 您还可以为每个图像添加自定义 class。

imagesBlocks.map((source, index) => {
  const { imgSrc } = source;
  return (
    <img src={imgSrc} key={index} alt="image" />
  )
})

Answer 3

Q2) 我如何显示 web 的图像不在项目文件夹中？

回答：

<Image source={{uri: 'https://static.kupindoslike.com/slika-konj-_slika_O_80128845.jpg'}} style={{width: 400, height: 400}} />

Q1）对于您的第一个问题。 您没有正确获得价值。 请试试这个答案。

    var [data, setData] = useState([
  {
    src: require("../assets/image.jpg"),
  },
  {
    src: require("../assets/image2.jpg"),
  },
]);

return (
  <SafeAreaView>
    <View>
      {data.map((image) => {
        return (
          <View>
            <Image source={image["src"])} /> //THIS WILL WORK
          </View>
        );
      })}
    </View>
  </SafeAreaView>
);