Pourquoi reac-grid-gallery affiche-t-il deux fois mes images?

Question

J'essaie de créer une galerie d'images en utilisant reac-grid-gallery. J'ai utilisé l'exemple de code pour obtenir rapidement quelque chose sur la page. Cependant, la balise n'affiche rien ou si j'ajoute une div avec mes images, je reçois une galerie deux fois. Ca marche mais ça n'a visiblement pas l'air très bien dans l'ensemble.

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

j'ai pu contourner le problème en utilisant une balise img séparée et en lui donnant un src = {this.IMAGES } prop. Si je ne dis pas cela.IMAGES l'accessoire alt est toujours visible. Aucune quantité de CSS ne le ferait disparaître.

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

}}