如何通过 JavaScript 正确地将图像添加到网页

Question

我正在学习一个创建动态网页的教程。该网页应该显示时间和根据任何时间更新的图像。但是，讲师插入图像的方式对我来说是新的，我不确定我在哪里搞砸了，但页面上根本没有显示任何图像。

    let today = new Date(),
    hour = today.getHours();
    if(hour < 12) {
        // Morning
        document.body.style.backgroundImage = "url('../images/Morning.jpg')";
        greeting.textContent = 'Good Morning';
    } else if(hour < 18) {
        // Afternoon
        document.body.style.backgroundImage = "url('../images/Evening.jpg')";
        greeting.textContent = 'Good Afternoon';
    } else {
        // Evening
        document.body.style.backgroundImage = "url('../images/Night.jpg')";
        greeting.textContent = 'Good Evening';
    }
}```
I get no error messages with the following function after calling it. However, no image is being displayed.

Answer 1

url('../images/Morning.jpg')";

必须是有效的网址。 假设您的 HTML 文件www.example.com/foo/index.html . 必须有一个www.example.com/images/Morning.jpg文件，否则您将看不到任何内容。

如果您之前的 URL 是"Morning/jpg"，则尤其如此，因为这不是一个有效的 URL(嗯，从技术上讲是这样，但它几乎肯定对您的情况无效(。