tengo una matriz de objetos y en el objeto hay una cadena que es una ruta de la imagen
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> ); } este trabajo require('../assets/image.jpg') pero quiero que los datos obtengan src - y probé esto ---- source={{uri: ``${user.src}`}} - --- no funciona--------------------------------------------- ------------- Y cómo puedo mostrar una imagen de la web que no está en la carpeta del proyecto (ejemplo: https://static.kupindoslike.com/slika-konj-_slika_O_80128845.jpg )
Use FlatList para representar una matriz de elementos y tiene una carga diferida, por lo que será bueno cuando use una gran cantidad de datos.
En su caso, use este código y funcionará bien:
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>P2) ¿Cómo puedo mostrar una imagen de la web que no está en la carpeta del proyecto?
responder:
<Image source={{uri: 'https://static.kupindoslike.com/slika-konj-_slika_O_80128845.jpg'}} style={{width: 400, height: 400}} />P1) Para su primera pregunta. No estás obteniendo el valor correctamente. Por favor, intente esta respuesta.
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> );tenia este problema y lo resolvi asi
../src/assets/images -> cree el archivo index.js y agregue sus imágenes en la carpeta de images . Tu index.js debería ser así
import firstImg from "./image_1.png"; import secondImg from "./image_2.png"; const images = { firstImg, secondImg, }; export default images;luego, en su componente, importe imágenes.js y cree su objeto.
import images from "../../assets/images"; const imagesBlock = [ { imgSrc: images.firstImage }, { imgSrc: images.secondImage } ] y luego use la función .map() . También puede agregar una clase personalizada para cada imagen.
imagesBlocks.map((source, index) => { const { imgSrc } = source; return ( <img src={imgSrc} key={index} alt="image" /> ) })