我正在尝试使用react-images创建照片库,URL正确,但是照片本身未加载到我的Web应用程序中。将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;
我正在寻求有关如何使其正常工作以及我做错了什么,或者我应该探索更多内容的反馈。
答案 0 :(得分:1)
答案 1 :(得分:0)
您不需要导入图像。
根据{{3}},您只需要将图像的路径作为字符串传递给<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} />;
}
}