Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1270 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  [React/JS] Actualiser image dans le front

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[React/JS] Actualiser image dans le front

n°2344696
codingseed
Posté le 17-01-2020 à 09:36:49  profilanswer
 

Bonjour à tous,
 
Je sèche sur un projet. Via mon admin, je dois pouvoir modifier des images sur plusieurs pages. Sur ma première page, c'était simple, j'ai pu récupérer mon image via l'id mais sur la seconde (page produits), j'ai potentiellement 16 images modifiables. J'imagine que je dois utiliser un tableau mais je ne parviens pas à trouver la solution.
 
Voici le code de mon composant (j'ai volontairement raccourci le render en ne gardant que 4 "produits" ) :
 
import React, { Component } from 'react';
import './Produits.css';
import Navigation from '../navigation/Navigation';
import Footer from '../footer/Footer';
 
const SERVER_ADDRESS = process.env.REACT_APP_SERVER_ADDRESS;
 
class Product extends Component {
    constructor(props) {
        super();
        this.state = {
             
            imageurl: [],
            data: null
        };
    }
 
    componentDidMount = () => {
        fetch(SERVER_ADDRESS + '/api/images/id')
            .then(response => response.json())
            .then(
                (Product) => {
                    console.log(Product);
                    this.setState({ imageurl: Product.image_name })
                }
            )
    }
 
render() {
        return (
            <div>
            <Navigation />
            <div className="mob-12 tab-12 tabx-12 dsk-12 prod">
                <p className="titre_produits">Produits en vente</p>
                <div className="dsk-10 groupe">
                    <div className="mob-8 tab-5 tabx-2 dsk-2 cadre_produits zoom">
                        {this.state.imageurl !== '' && <img className="image_produits" src={SERVER_ADDRESS + "/pictures/" + this.state.imageurl} alt="" />}
                        <p>Meuble</p>
                    </div>
                    <div className="mob-8 tab-5 tabx-2 dsk-2 cadre_produits zoom">
                        {this.state.imageurl !== '' && <img className="image_produits" src={SERVER_ADDRESS + "/pictures/" + this.state.imageurl} alt="" />}
                        <p>Meuble</p>
                    </div>
                    <div className="mob-8 tab-5 tabx-2 dsk-2 cadre_produits zoom">
                        {this.state.imageurl !== '' && <img className="image_produits" src={SERVER_ADDRESS + "/pictures/" + this.state.imageurl} alt="" />}
                        <p>Meuble</p>
                    </div>
                    <div className="mob-8 tab-5 tabx-2 dsk-2 cadre_produits zoom">
                        {this.state.imageurl !== '' && <img className="image_produits" src={SERVER_ADDRESS + "/pictures/" + this.state.imageurl} alt="" />}
                        <p>Meuble</p>
                    </div>
                </div>                
            <Footer />
        </div>
        );
    }
}
 
export default Product;

mood
Publicité
Posté le 17-01-2020 à 09:36:49  profilanswer
 

n°2344700
codingseed
Posté le 17-01-2020 à 11:26:03  profilanswer
 

J'ai finalement trouvé une solution. Je poste ça dès que possible pour ceux que cela pourrait intéresser.  :jap:


Message édité par codingseed le 17-01-2020 à 11:29:29

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  [React/JS] Actualiser image dans le front

 

Sujets relatifs
integration image dans mailAggrandir une image de Portfolio en cliquant / JS
Intéger les data d'une image au source HTMLAfficher / masquer div en fonction d'une liste déroulante (jQuery/JS)
actualiser une table à partir d'une autre[LibreOffice][Tableur] Macro pour actualiser des liens externes html
Délai de fermeture sur script JS.Obfuscation des liens JS
actualiser donnée database via liste deroulante ajax 
Plus de sujets relatifs à : [React/JS] Actualiser image dans le front


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR