Возможно ли это только с внешними URL-адресами, а не с локальными?
Я пытаюсь создать фотогалерею, используя реагирующие изображения, 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;
Я ищу отзывы о том, как заставить это работать и что я сделал неправильно, или что я должен изучить больше.
Привет, Дерек, там написано https://localhost:8000/src/images/gallery/illustration/Blacksmith.jpg, и то же самое происходит, когда я проверяю другой, за исключением Mage.jpg
Ответы 2
Вам не нужно импортировать изображения.
Согласно документация по реактивным изображениям, вам просто нужно передать путь к изображению в виде строки компоненту <Carousel>, как в этом примере ниже:
import React from 'react';
import Carousel from 'react-images';
const images = [{ src: 'path/to/image-1.jpg' }, { src: 'path/to/image-2.jpg' }];
class Component extends React.Component {
render() {
return <Carousel views = {images} />;
}
}
Я пробовал это, и это не работает. Но я нашел ответ! Спасибо хоть байтун!
В итоге я добавил изображения, которые хотел для галереи, в общую папку, как указано ниже в этом сообщение.
Поскольку https://localhost:8000 появлялся перед ссылками на изображения, которые я хотел использовать.
Всем спасибо за помощь в поиске ответа!!
Привет, Брэд, когда вы просматриваете сломанное изображение в браузере, какой там отображается источник?