Это возможно только для внешних URL-адресов, а не для локальных? - PullRequest
Новая
       58

Это возможно только для внешних URL-адресов, а не для локальных?

0 голосов
/ 12 июля 2019

Я пытаюсь создать фотогалерею, используя реагирующие изображения, 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;

Мне нужны отзывы о том, как заставить это работать и чтоЯ сделал неправильно, или что я должен исследовать больше.

Ответы [ 2 ]

1 голос
/ 13 июля 2019

Итак, я добавил фотографии, которые хотел для галереи, в общую папку, как упоминалось ниже в этом сообщении

Так как https://localhost:8000 появлялся перед ссылками на изображения, которые я хотел использовать.

Спасибо всем за помощь в поиске ответа !!

0 голосов
/ 12 июля 2019

Вам не нужно импортировать изображения.
В соответствии с response-images документацией , вам просто нужно передать путь к изображению в виде строки в <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} />;
  }
}
...