如何在 React Native 中显示来自变量的图像

Question

我有对象数组，对象是字符串，它是图像的路径

  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}`}} ---- 它不起作用---------------- -------------------------------------- 以及我如何显示来自网络而不是项目文件夹中的图像（例如：https://static.kupindoslike.com/slika-konj-_slika_O_80128845.jpg）

Answer 1

有这个问题，我是这样解决的

../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 并创建您的对象。

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

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

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

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

Answer 2

Q2) 如何显示来自网络而不是项目文件夹中的图像？

答案：

<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>
);

Answer 3

使用 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>

如何在 React Native 中显示来自变量的图像

How to display image from variable in react native

javascript

jsx

react-native