如何在HTML页面中显示图片？点击按钮加载图片离线不生效如何解决

根因说明 #

代码失效有两个核心原因：

1. 点击事件绑定时机错误：绑定按钮点击事件的jQuery代码放在了<head>标签内，代码执行时<body>里的按钮、输入框、图片等DOM元素还未完成渲染，找不到#btn元素导致事件绑定未生效。jsFiddle平台默认会把用户编写的JS代码放在DOM加载完成的回调中执行，因此平台上运行正常。
2. jQuery本地加载失败：引入的是本地路径的jquery-1.8.3.min.js，如果该JS文件没有和HTML文件放在同一目录下，jQuery会加载失败，$标识符报错，所有依赖jQuery的逻辑都无法执行。

解决方法 #

• 方案1：给JS逻辑套上DOM加载完成的回调，保证元素渲染后再绑定事件
  将原有事件绑定代码修改为：

$(document).ready(function() {
  $('#btn').on('click', function() {
    $('#img').attr('src', $('#url').val());
  });
});

• 方案2：直接把绑定事件的JS代码挪到</body>标签前，放在所有DOM元素之后，执行时元素已生成即可正常绑定
• 额外检查：确认jquery-1.8.3.min.js文件和HTML文件在同一文件夹下，或替换为本地正确的jQuery文件路径

修正后完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="jquery-1.8.3.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#btn').on('click', function() {
                $('#img').attr('src', $('#url').val());
            });
        })
    </script>
    <style>
        .center {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 30%;
        }
    </style>
    <title>图片预览工具</title>
</head>
<body>
    <br><br>
    <img src="" id="img" class="center" alt="预览图片">
    <br><br>
    请在下方输入图片的URL：<br><br>
    <input type="text" id="url"/><input type="button" id="btn" value="显示图片" />
</body>
</html>

内容的提问来源于stack exchange，提问作者Usifu Barrie M