Как добавить картинки через props в React Carousel Image Gallery?

Question

[jeka-3]

Как добавить картинки через props в React Carousel Image Gallery ?

Comments

[Антон Спирин]

Смотря, что вы подразумеваете под "свои props"

[jeka-3]

Антон Спирин, картинки добавлять через props

[Антон Спирин]

jeka-3, первый же пример в документации.

[jeka-3]

Антон Спирин, я хочу вывести свои картинки через props, там же по ссылке сначала

[Антон Спирин]

jeka-3, а проблема в чем?

[jeka-3]

Антон Спирин, не могу задать свои картинки

[Антон Спирин]

jeka-3, исходя из того, что пример из официальной документации:

import ImageGallery from 'react-image-gallery';

class MyComponent extends React.Component {

  render() {

    const images = [
      {
        original: 'http://lorempixel.com/1000/600/nature/1/',
        thumbnail: 'http://lorempixel.com/250/150/nature/1/',
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/2/',
        thumbnail: 'http://lorempixel.com/250/150/nature/2/'
      },
      {
        original: 'http://lorempixel.com/1000/600/nature/3/',
        thumbnail: 'http://lorempixel.com/250/150/nature/3/'
      }
    ]

    return (
      <ImageGallery items={images} />
    );
  }

}

вам не подходит, что вы подразумеваете под своими картинками?

[jeka-3]

Антон Спирин, в original вместо 'lorempixel.com/1000/600/nature/1', задать props, который будет выводить мою картинку. которую я задам в другом документе. Главное не понятно как в этом коде задать пропсы

[Антон Спирин]

jeka-3,

Главное не понятно как в этом коде задать пропсы

Этот код как раз демонстрация того, какой формат должны иметь данные, которые вы передаете через props.

Вам стоит начать с основ JavaScript, если у вас такие элементарные вещи вызывают ступор.
Покажите свой код и проблемное место, так как из вашего описания не ясно, что именно у вас не получается.

Answer 1

[Ostic]

import ImageGallery from 'react-image-gallery';
 
class MyComponent extends React.Component {
 render() {
     return (
      <ImageGallery items={images} />
    );
  }
 
}

где images

const images = [
  {
    original: 'http://lorempixel.com/1000/600/nature/1/',
    thumbnail: 'http://lorempixel.com/250/150/nature/1/',
  },
 {
   original: 'http://lorempixel.com/1000/600/nature/2/',
   thumbnail: 'http://lorempixel.com/250/150/nature/2/'
 },
{
   original: 'http://lorempixel.com/1000/600/nature/3/',
   thumbnail: 'http://lorempixel.com/250/150/nature/3/'
 }
]

там же в доке всё написано...