Я пытаюсь создать фотогалерею, используя реагирующие изображения, URL-адреса правильные, но сами фотографии не загружаются в мое веб-приложение.Я получаю значок разбитого изображения при переключении modalIsOpen:false
на true.
Я попытался найти примеры тех же проблем и альтернатив, например, правильно ли настроен компонент или я расширяю его прямо в классе.
import React, { Component } from 'react';
import Carousel, { Modal, ModalGateway } from 'react-images';
import blksmith from '../images/gallery/illustration/Blacksmith.jpg';
import mage from '../images/gallery/illustration/Mage.jpg';
const images =
[
{
src:{blksmith}
} ,
{
src:{mage}
}
];
class illuGallery extends Component {
state = { modalIsOpen: false }
toggleModal = () => {
this.setState(state => ({ modalIsOpen: !state.modalIsOpen }));
}
render() {
const { modalIsOpen } = this.state;
return (
<ModalGateway>
{modalIsOpen ? (
<Modal onClose={this.toggleModal}>
<Carousel
views={images}
/>
</Modal>
) : null}
</ModalGateway>
);
}
}
export default illuGallery;
Это фактический файл gallery.js, веб-страница, которая отображает галерею.
import React from 'react';
import Layout from "../components/layout";
import IlluPhotos from "../components/illustrationGallery";
import SEO from "../components/seo";
import './gallery.scss';
const GalleryPage = () => {
return (
<Layout>
<div style={{width:'100%',height:'250px'}}>
<SEO title="Gallery" />
<IlluPhotos/>
</div>
</Layout>
)
}
export default GalleryPage;
Мне нужны отзывы о том, как заставить это работать и чтоЯ сделал неправильно, или что я должен исследовать больше.