javascript - 如何使图像显示为结果

Question

我一直在研究石头剪刀布游戏，我希望在用户进行选择时显示图像。例如，如果我选择纸而计算机选择岩石，我希望岩石图像与“输”声明一起显示

我尝试将图像放在文件夹之外，看看是否有效，但没有。

HTML

<div class="main-container">
    <div class="score">
        <p>You:0</p>
        <p>Computer:0</p>
    </div>
     <div class="user-choices">
        <img id='rock'class='choice' src="rock.png">
        <img id='paper'class='choice' src="paper.png">
        <img id='scissors'class='choice' src="scissors.png">
   </div>
    <div class='result'>
        <div class="cpu-result"></div>
    </div>
</div>

CSS

<style>
.result img {
height: 10rem;
 }

.result{
 text-align: center;
 display: none;
}
</style>

Javascript

<script>
    function cpuChoice() {
        const rand = Math.random()
        if (rand > .34) {
            return 'paper'
        } else if (rand <= .67) {
            return 'rock'
        } else {
            return 'scissors'
        }
    }

    function showWinner(winner,computerPick) {
        if (winner === 'player') {
            scoreboard.player++;
            cpuResult.innerHTML = `<h2>Win!</h2>
            <img class='cpu-result' src='${computerPick}.png>' `
        } else if (winner === 'computer') {
            scoreboard.computer++;
            cpuResult.innerHTML = `<h2>Lose!</h2>
            <img class='cpu-result' src='${computerPick}.png>'`
        } else {
            cpuResult.innerHTML = `<h2>Draw!</h2>
            <img class'cpu-result' src='${computerPick}.png>' `
        }
        score.innerHTML = `
        <p>Player:${scoreboard.player}</p>
        <p>Computer: ${scoreboard.computer}</p>
        `
        result.style.display ='block'/
    }

    choices.forEach(choices => choices.addEventListener('click', play))
</script>

我希望图像与赢输或平局消息一起显示。

标签： javascripthtmlcss