代码之家 › 专栏 › 技术社区 › OsoGrizz

为什么react grid gallery会两次显示我的图像?

image-gallery reactjs javascript

0

OsoGrizz · 技术社区 · 7 年前

我正在尝试使用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>
    )
  }
}

//索引.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')
  )

1 回复 | 直到 5 年前

1

0

kboul 5 年前

我可以通过使用一个单独的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>
    )
  }
}