Галерея динамических лайтбоксов из JSON

У меня есть этот URL, успешно обработанный Axios

const URL_INTERIORES = 'http://localhost:3001/interiores';

Я установил реагировать-изображение-лайтбокс из npm, и он дал мне изображения по умолчанию, настроенные в массиве.

const images = [
  '//placekitten.com/1500/500',
  '//placekitten.com/4000/3000',
  '//placekitten.com/800/1200',
  '//placekitten.com/1500/1500',
];

Я хотел бы изменить массив по умолчанию, чтобы изображения из файла db.json попадали в лайтбокс изображений. Как я могу это решить? Вот остальная часть кода с конфигурацией «response-image-lightbox»:

class Interiores extends Component {
  constructor(props) {
    super(props)
    this.state = {
      interiores: [],
      photoIndex: 0,
      isOpen: false
    }

  }

  componentDidMount() {
    axios.get(URL_INTERIORES)
      .then(res => {
        this.setState({ interiores: res.data })
      })
  }

  render() {
    const { photoIndex, isOpen } = this.state;
    return (
      <div>
        <button type = "button" onClick = {() => this.setState({ isOpen: true })}>
          Open Lightbox
        </button>

        {isOpen && (
          <Lightbox
            mainSrc = {images[photoIndex]}
            nextSrc = {images[(photoIndex + 1) % images.length]}
            prevSrc = {images[(photoIndex + images.length - 1) % images.length]}
            onCloseRequest = {() => this.setState({ isOpen: false })}
            onMovePrevRequest = {() =>
              this.setState({
                photoIndex: (photoIndex + images.length - 1) % images.length,
              })
            }
            onMoveNextRequest = {() =>
              this.setState({
                photoIndex: (photoIndex + 1) % images.length,
              })
            }
          />
        )}           

      </div>
    )
  }
}    

export default Interiores;

А вот и мой файл db.json.

 "interiores": [
    {
      "text": "introduction text here",
      "images": [
        "int_01_thumb.jpg", "int_02_thumb.jpg", "int_03_thumb.jpg", 
        "int_04_thumb.jpg",  "int_05_thumb.jpg",  "int_06_thumb.jpg",  
        "int_07_thumb.jpg",  "int_08_thumb.jpg",  "int_09_thumb.jpg"
      ]
    }
  ],

Вы обслуживаете изображения? Если это так, вы можете просто добавить их относительные пути в рассматриваемый массив.

— 17.07.2018 03:45

Я бы хотел выложить изображения из файла db.json

— 17.07.2018 04:08

json reactjs lightbox react-image-lightbox

17.07.2018 03:16

Как сделать HTTP-запрос в Javascript?

В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:

426

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я никогда не работал с такой библиотекой, поэтому мне может что-то не хватать, но будет ли такая альтернатива работать?

render() {
    const { interiores, photoIndex, isOpen } = this.state; // Added 'interiores'

    // Link to static root and make a relative path for each iamge
    const staticRoot = '//localhost:3001/interiores/'
    const images = interiores[0].images.map(i => staticRoot + i)

    // Rest of your code
}

Когда у вас есть имена файлов, просто свяжите их со своим статическим путем к файлам / изображениям и сопоставьте их с массивом изображений.

17.07.2018 04:22