HTML中<img>元素无法显示图片，全项目图片消失求助

HTML中无法显示本地图片的解决方法 #

核心问题在于你使用了本地绝对路径（C:\Users\Samet\Desktop\Resim\mogus.png）加载图片，浏览器出于安全策略，会阻止网页直接访问本地文件系统的资源，这就是所有图片无法显示的根本原因。

具体解决步骤： #

1. 将图片移动到你的HTML项目目录内，比如在项目根目录新建一个images文件夹，把mogus.png放入其中。
2. 使用相对路径替代绝对路径，相对路径以当前HTML文件的位置为基准。例如HTML文件在项目根目录，图片在images文件夹中，路径应写为images/mogus.png。
3. 路径分隔符统一用正斜杠/，不要用Windows系统的反斜杠\——反斜杠在URL中是转义字符，会导致路径解析错误。

修改后的代码示例： #

<html lang="en">
<head>
    <link rel="stylesheet" href="mad.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" href="images/mogus.png">
    <title>wutr</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cinzel&display=swap" rel="stylesheet">
</head>
<body>
    <h1>There is 7 rules in this world</h1>
    <ol>
        <li>
            <div class="prf">
                <p>There is only one thing in this world</p>
            </div>
        </li>
    </ol>
    <img src="images/mogus.png" alt="imgd" height="1000px" width="100px">
    <p class="pain">Pain</p>
</body>
</html>

额外注意： #

• 无论是图片还是网站图标（favicon），都不要直接引用本地磁盘的绝对路径，要遵循网页资源的加载规范。
• 即使你直接打开本地HTML文件（使用file://协议），浏览器的安全限制仍可能拦截跨目录的资源请求，将资源放在项目内是最稳妥的方案。

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