Pictures do not display by MATH.RANDOM

Question

0.00/5 (No votes)

See more:

We have images in folders, named (face1.png,...,face6.png) using this code; I can't display images, we randomly retrieve photos:

JavaScript

import React from "react"; 
import jeuxde from "../images/jeuxde.jpg"; 
 
 
export default class JeuDe extends React.Component{ 
    constructor (props){ 
        super(props); 
        this.state= {face: null, compteur: 0, fin: false}; 
    }; 
 
 
 
jouer(){ 
    const valeur = Math.floor(Math.random()*6)+1; 
    this.setState({ 
        face:this.state.face = valeur, 
        compteur:this.state.compteur+=valeur, 
    }) 
    const image = document.getElementById("des") 
    image.src = '../images/face' +valeur + '.png' 
} 
 
initialiser (){ 
    this.setState({  
        face: null, compteur: 0, fin: false 
    }); 
} 
render(){ 
    const styleImage={width:"100px",height:"100px"}; 
    return ( 
                <div> 
            <img src={jeuxde} alt={"jeux de"}/> 
            <h1>Jeu de Dé...</h1> 
            <h2>face:{this.state.face}</h2> 
            <div > 
            <img id="des" style={styleImage} /> 
 
            </div> 
            <h2>nombre dessais {this.state.compteur}</h2> 
            <button onClick={(()=>this.jouer())}>jouer</button> 
             
            <p>Bravo vous avez trouvez la face cachée...</p> 
            <button onClick={(()=>this.initialiser())}>Initialiser</button> 
        </div>      
        ); 
    } 
}

The problem:
when I use inspect, I find the pictures change in the src but not display in DOM,but when I use it I get

HTML

<img id="des" style="width: 100px; height: 100px;" src="../images/face3.png">

What I have tried:

I'm using this code but images don't display in the DOM,

JavaScript

const image = document.getElementById("des") 
image.src = '../images/face' +valeur + '.png

This <src="../images/face3.png">is added when the button <this.jouer())}>jouer > is clicked randomly but images don't display in the DOM.

Posted 7-Nov-22 22:24pm

wiam leo

Updated 9-Nov-22 6:06am

PIEBALDconsult

v4

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

OriginalGriff · Answer 1 · 2022-11-07T22:49:00

Solution 1

The question is, where are the images? If they are on the server, Javascript can't access them because it runs on the Client and has no access to the server filesystem.

If they are on the client, where on the client? You are using absolute addressing, so it depends on where the "current folder" is for your browser - and that's likely to be the Chrome / Edge / Firefox executable folder. Which is unlikely to be anywhere near your user's images folder.

Posted 7-Nov-22 22:49pm

OriginalGriff

Comments

wiam leo 8-Nov-22 5:31am

But the folder of images is in the same folder I'm working on.
and the path of the folder is "src\images"

OriginalGriff 8-Nov-22 7:09am

But is that on the server or the client?
At a guess, that's server: the "src" implies that.

wiam leo 8-Nov-22 8:13am

I want to display it in the "public\index.html"

OriginalGriff 8-Nov-22 9:00am

:sigh:

Your user browser runs on the client computer.
Javascript runs within the browser.
Your backend code runs on the server computer.
Javascript is not running here: C#, VB, or PHP is.
HTML files are stored on the server, and sent to the client browser when the page update is completed by the backend code.
The browser now renders the HTML and runs the javascript.

The javascript has limited access to the client resources for security ground, and no access at all to server resources.

If your pictures are on the server, your javascript cannot access them.

Do you understand now?

wiam leo 8-Nov-22 9:26am

sorry no!!

Dave Kreskowiak 8-Nov-22 9:44am

The React code you're writing runs ONLY ON THE SERVER and generates the HTML that is sent to the client browser.

wiam leo · Answer 2 · 2022-11-08T03:48:00

I solved the problems

<br /> import React from "react";<br /> import jeuxde from "../images/jeuxde.jpg";<br /> <br /> export default class JeuDe extends React.Component{<br /> constructor (props){<br /> super(props);<br /> this.state= {face: null, compteur: 0, fin: false,image:' '};<br /> };<br /> <br /> jouer(){<br /> const valeur = Math.floor(Math.random()*6)+1;<br /> this.setState({<br /> face:this.state.face = valeur,<br /> compteur:this.state.compteur+=valeur,<br /> image:this.state.image=require("../images/face"+valeur+'.png')<br /> })<br /> }<br /> <br /> initialiser (){<br /> this.setState({ <br /> face: null, compteur: 0, fin: false,image:' ',<br /> });<br /> }<br /> render(){<br /> const styleImage={width:"100px",height:"100px"};<br /> return (<br /> <div><br /> <img src={jeuxde} alt={"jeux de"}/><br /> <h1>Jeu de Dé...</h1><br /> <h2>face:{this.state.face}</h2><br /> <img id="des" style={styleImage} src={this.state.image}/><br /> <h2>nombre dessais {this.state.compteur}</h2><br /> <button onClick={(()=>this.jouer())}>jouer</button><br /> <p>Bravo vous avez trouvez la face cachée...</p><br /> <button onClick={(()=>this.initialiser())}>Initialiser</button><br /> </div><br /> );<br /> }<br /> }<br />