Svelte on:click事件无响应：掷骰子游戏图片不更新求助

你的代码有三个核心问题导致点击按钮无反应：

1. 随机数未更新：randomNumber仅在组件初始化时生成一次随机值，点击按钮时没有重新计算新的随机数，所以图片路径不会变化。
2. 未触发响应式更新：rollDice函数只是返回图片路径，但没有修改任何响应式变量。Svelte依赖响应式变量的变化来触发DOM更新，单纯返回值不会触发视图刷新。
3. 图片路径错误：img标签的src属性缺少.png后缀，且路径拼接不完整，无法正确指向图片文件。

修复后的代码 #

简化版写法 #

<script>
    // 初始化随机数
    let randomNumber = Math.trunc(Math.random() * 6) + 1;

    function rollDice() {
        // 点击时重新生成随机数，触发响应式更新
        randomNumber = Math.trunc(Math.random() * 6) + 1;
    }
</script>

<!-- 直接在模板中拼接正确的图片路径 -->
<img src={`/src/lib/images/dice-${randomNumber}.png`} alt="Playing dice" class="dice" />

<button on:click={rollDice} class="btn btn--roll">🎲 Roll dice</button>

更规范的SvelteKit写法（使用$lib别名） #

在SvelteKit中，推荐使用$lib别名引用src/lib目录下的资源，避免部署时的路径问题：

<script>
    let randomNumber = Math.trunc(Math.random() * 6) + 1;

    function rollDice() {
        randomNumber = Math.trunc(Math.random() * 6) + 1;
    }

    // 用响应式语句自动计算图片路径
    $: diceImage = `${$lib}/images/dice-${randomNumber}.png`;
</script>

<img src={diceImage} alt="Playing dice" class="dice" />

<button on:click={rollDice} class="btn btn--roll">🎲 Roll dice</button>

修复逻辑说明 #

• 每次点击按钮时，rollDice函数会重新给randomNumber赋值新的随机数，Svelte会自动检测到这个响应式变量的变化，更新DOM中的图片路径。
• 修正图片路径的拼写错误，确保路径与实际图片文件名（dice-1.png到dice-6.png）完全匹配。
• 使用$lib别名是SvelteKit的最佳实践，它会自动解析src/lib的正确路径，避免本地开发和生产环境的路径差异。

内容的提问来源于stack exchange，提问作者Anpace