1
votes

JS et REACT, pourquoi gif ne se charge pas

J'ai essayé d'ajouter gif par lien dans mon code de réaction mais cela ne fonctionne pas, est-ce que quelqu'un peut me dire pourquoi ?? Je veux ajouter un gif et créer une autre page Web pour le gros gif et les informations de l'utilisateur, mais je peux le faire seul

    import React from 'react';

    function Cards(props){
        return (
            <div>
                <h3>User name: {props.name}</h3>
                <p>User photo: {props.photo}</p>
                {props.children}
            </div>
        )
    }

    export default Cards

// Cartes

import React from 'react';
import Cards from './Components/Cards/Cards'

class App extends React.Component {
  componentDidMount() {
    const { pageTitle } = this.state;
    document.title = pageTitle;
  }
  state = {
    cards: [
      { name: 'Arman', photo: 'https://media.giphy.com/media/YrqdSMxfthoEyAOLro/giphy.gif' },
      { name: 'Serge', photo: 'https://giphy.com/gifs/MDgEcS8CqqDxB2YClD/html5' },
    ],
    pageTitle: 'Cards'
  }

  render() {
    return (
      <div>
        <Cards
          name={this.state.cards[0].name}
          photo={this.state.cards[0].photo}
        />
        <Cards
          name={this.state.cards[1].name}
          photo={this.state.cards[1].photo}
        />
      </div >
    )
  }
}

export default App

javascript reactjs

1 commentaires

Nous devons voir le code du composant Cards

3 Réponses :

2
votes

Essayez d'utiliser la propriété photo au lieu de link

<Cards
  name={this.state.cards[0].name}
  photo={this.state.cards[0].photo}
/>

3 commentaires

et rien ne s'est passé

Montrez-moi votre composant

Ajoutez à votre composant Cards

0
votes

import React from 'react';
import Cards from './Components/Cards/Cards'

class App extends React.Component {
  componentDidMount() {
    const { pageTitle } = this.state;
    document.title = pageTitle;
  }
  state = {
    cards: [
      { name: 'Arman', photo: 'https://media.giphy.com/media/YrqdSMxfthoEyAOLro/giphy.gif' },
      { name: 'Serge', photo: 'https://giphy.com/gifs/MDgEcS8CqqDxB2YClD/html5' },
    ],
    pageTitle: 'Cards'
  }

  render() {
    return (
      <div>
        <Cards
          name={this.state.cards[0].name}
        />
        <img src={this.state.cards[0].photo}></img>            
      </div>
    )
  }
}

export default App

0 commentaires

0
votes

  // App Component
  <div>
    {this.state.cards.map(card => {
       return <Cards
          name={card.name}
          photo={card.photo}
        />
       })
    }
  </div>

  //Child Component
  <div>
       <h3>User name: {props.name}</h3>
       <div>User photo: <img src={props.photo} /></div>
       {props.children}
  </div>

0 commentaires