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

[ad_1]

このコードを使用して、(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

問題は、画像がどこにあるかです。 それらがサーバー上にある場合、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 />

[ad_2]

Source link

コメント

タイトルとURLをコピーしました