0
255
Views¿Por qué mi control deslizante de imágenes solo muestra la primera imagen en lugar de las 3 imágenes?
Quiero hacer un control deslizante de imagen en mi aplicación usando el paquete 'react-simple-image-slider'. Pero solo muestra la primera imagen.
En mi firestore, mi imageUrl se almacena así:
En la documentación del paquete, muestra que las 'imágenes' deben almacenarse en este formato:
El sitio web de este paquete: https://www.npmjs.com/package/react-simple-image-slider
Luego, en mi aplicación, obtuve los datos y almacené el imageUrl en la 'imagen' y lo pasé a 'SimpleImageSlider' para usarlo.
const ProductPage = ({ collection, match }) => { const { items } = collection; const image = [{url: items[match.params.itemId - 1].imageUrl}]; console.log(image); return ( <div className='collection-page'> <SimpleImageSlider width={500} height={500} images={image} showBullets={true} showNavs={true} /> <div className='items'> {items[match.params.itemId - 1].name} </div> </div> ) };Sin embargo, la aplicación solo muestra la primera imagen en el control deslizante:
Tengo console.log (imagen) y pensé que ya almacené las 3 URL de imagen en la matriz, pero no tengo idea de por qué solo muestra la primera. ¿Hay algún problema con el método con el que almaceno la 'imagen' y cómo puedo convertirla para que se ajuste a la estructura que necesita la documentación de los datos que obtuve de la base de datos?
2 answers
Answer question0
Su matriz tiene formato url: [] , cuando los documentos dicen que cada objeto en la matriz debe tener formato { url: "" } . Por lo tanto, asegúrese de que su matriz se vea así:
[ { url: "https://..." }, { url: "https://..." }, { url: "https://..." }, ]0
Esto debería funcionar ya que asignará un objeto a cada elemento.
const ProductPage = ({ collection, match }) => { let { items } = collection; let image = [] useEffect(()=>{ items.map(item=>image.push({url: item.imageUrl})) },[]) console.log(image); return ( <div className='collection-page'> {image.length && <SimpleImageSlider width={500} height={500} images={image} showBullets={true} showNavs={true} /> } <div className='items'> {items[match.params.itemId - 1].name} </div> </div> ) };