MATH.RANDOM で画像が表示されない

このコードを使用して、(face1.png、…、face6.png) という名前のフォルダーに画像があります。画像を表示できません。ランダムに写真を取得します。

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

問題：

インスペクトを使用すると、srcで写真が変更されていることがわかりますが、DOMには表示されませんが、使用すると取得されます

HTML

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

私が試したこと：

このコードを使用していますが、画像が DOM に表示されません。

JavaScript

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

この <src=”https://www.codeproject.com/Questions/5346429/images/face3.png”>ボタン<this.play())}>プレイ > はランダムにクリックされますが、画像は DOM に表示されません。

解決策 1
解決策 2

解決策 1

問題は、画像がどこにあるかです。それらがサーバー上にある場合、Javascript はクライアント上で実行され、サーバーのファイルシステムにアクセスできないため、それらにアクセスできません。

それらがクライアント上にある場合、クライアントのどこにありますか? 絶対アドレス指定を使用しているため、ブラウザの「現在のフォルダー」がどこにあるかによって異なります。これは、Chrome / Edge / Firefox 実行可能フォルダーである可能性があります。これは、ユーザーの近くにある可能性は低いです images フォルダ。

解決策 2

問題を解決しました

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

Source link