为什么react-grid-gallery显示我的图像两次？

我正在尝试使用react-grid-gallery创建图库。我使用了示例代码来快速获取页面上的内容。然而，标签不显示任何内容，或者如果我添加一个div与我的图像，然后显示一个画廊两次。它的工作原理，但它总体上看起来不太好。为什么react-grid-gallery显示我的图像两次？

import React from 'react' 
import { NavLink } from 'react-router-dom' 
let brand = 'app/images/brand.png' 

import { render } from 'react-dom' 
import Gallery from 'react-grid-gallery' 

let gallery1 = 'app/images/gallery1.jpg' 
let gallery2 = 'app/images/gallery2.jpg' 
let gallery3 = 'app/images/gallery3.jpg' 
let gallery4 = 'app/images/gallery4.jpg' 
let gallery5 = 'app/images/gallery5.jpg' 
let gallery6 = 'app/images/gallery6.jpg' 

const IMAGES = 
[ 
{ 
    src: 'app/images/gallery1.jpg', 
    thumbnail: 'app/images/gallery1.jpg', 
    thumbnailWidth: 800, 
    thumbnailHeight: 800, 
}, 
{ 
    src: 'app/images/gallery2.jpg', 
    thumbnail: 'app/images/gallery2.jpg', 
    thumbnailWidth: 800, 
    thumbnailHeight: 800, 
}, 
{ 
    src: 'app/images/gallery3.jpg', 
    thumbnail: 'app/images/gallery3.jpg', 
    thumbnailWidth: 800, 
    thumbnailHeight: 800, 
}, 
{ 
    src: 'app/images/gallery4.jpg', 
    thumbnail: 'app/images/gallery4.jpg', 
    thumbnailWidth: 800, 
    thumbnailHeight: 800, 
}, 
{ 
    src: 'app/images/gallery5.jpg', 
    thumbnail: 'app/images/gallery5.jpg', 
    thumbnailWidth: 800, 
    thumbnailHeight: 800, 
}, 



export class GalleryCarousel extends React.Component { 

render() { 
return (

    <div className='home-container'> 

    <NavLink to='/' style={{marginTop: 80}}> 
     <img src={brand} alt={'img for brand'} /> 
    </NavLink> 

    <div className=''> 
     <div className='tile' ><img src={gallery1} alt=''/></div> 
     <div className='tile' ><img src={gallery2} alt=''/></div> 
     <div className='tile' ><img src={gallery3} alt=''/></div> 
     <div className='tile' ><img src={gallery4} alt=''/></div> 
     <div className='tile' ><img src={gallery5} alt=''/></div> 
     <div className='tile' ><img src={gallery6} alt=''/></div> 

     <Gallery images={IMAGES} backdropClosesModal={true}/> 
    </div> 
    </div> 
)

}}

//index.js

import React from 'react' 
import ReactDOM from 'react-dom' 
import {Nav} from './Nav' 
import {Home} from './Home' 
import {About} from './About' 
import {Press} from './Press' 
import {GalleryCarousel} from './Gallery' 
import {Contact} from './Contact' 
import {Footer} from './Footer' 
let ReactRouter = require('react-router-dom') 
let Router = ReactRouter.BrowserRouter; 
let Route = ReactRouter.Route 
let Switch = ReactRouter.Switch 
import './index.css' 




class App extends React.Component { 

    render() { 
    return (
     <Router> 
     <div className='container'> 
      <Nav /> 

    <Switch> 
     <Route exact path='/' component={Home} /> 
     <Route path='/about' component={About} /> 
     <Route path='/press' component={Press} /> 
     <Route path='/gallery' component={GalleryCarousel} /> 
     <Route path='/contact' component={Contact} /> 
     <Route render={function() { 
     return <h1 style={{ paddingTop: 80 }}>Page Not Found.</h1> 
     }} /> 
    </Switch> 
    <Footer 
     scrollStepInPx='50' 
     delay='16.66' 
    /> 
    </div> 
    </Router> 
) 
    } 
    } 

    ReactDOM.render(
    <App />, 
    document.getElementById('app') 
)

来源

2017-08-05 OsoGrizz

我不认为你需要在图库上方''

等，你只是平铺图像。 – Win

这也是我最初的想法，但是当我删除这些div> img时，画廊不显示任何内容。例如，如果我将其设置为isOpen = {true}，灯箱仍然存在。 – OsoGrizz

您的代码在DOM中创建元素的位置在哪里？您的问题可能实际存在，而不是组件。 –

我能够通过使用一个单独的img标签，给它一个src = {this.IMAGES解决问题}道具。如果我不这样说。图片alt道具始终可见。没有任何CSS会让它消失。

export class GalleryCarousel extends React.Component { 

render() { 
    return (

    <div className='home-container'> 

    <NavLink to='/' style={{marginTop: 80}}> 
     <img src={brand} alt={'img for brand'} /> 
    </NavLink> 

    <div> 
     <img src={this.IMAGES} /> 
     <Gallery images={IMAGES} backdropClosesModal={true} /> 
    </div> 

    </div> 
)

}}

来源

2017-08-06 00:41:12 OsoGrizz

为什么react-grid-gallery显示我的图像两次？

回答

相关问题