[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
コメント