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}道具来解决这个问题。如果我不说这个。图片alt prop总是可见的。没有多少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会两次显示我的图像？

1 个答案: