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

Question

我正在尝试使用 react-grid-gallery 创建图片库。我使用示例代码快速获取页面上的内容。但是，标签要么不显示任何内容，要么如果我在图像中添加 div，然后我会得到一个显示两次的画廊。可以用，但显然整体看起来不太好。

 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')
  )

Answer 1

我能够通过使用单独的 img 标签并为其提供 src={this.IMAGES} 属性来解决该问题。如果我不说 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>
    )
  }
}

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

Why does react-grid-gallery display my images twice?

javascript

image-gallery

reactjs