网页img标签引用本地图片无法在浏览器显示的技术求助

问题根源 #

你直接用本地绝对路径C:\Users\TIMILEHIN\Downloads\pexels-cats-coming-707582.jpg作为图片src，但浏览器在Web服务环境下受安全机制限制，不会直接读取本地磁盘的绝对路径资源，必须使用基于项目目录的相对路径。

解决步骤 #

• 第一步：在你的项目根目录新建一个专门存图片的文件夹，比如命名为images，把下载的目标图片复制到这个文件夹里。
• 第二步：修改img标签的src属性为相对路径：

  <img src="./images/pexels-cats-coming-707582.jpg" alt="背景图">
  

• （可选）如果要把图片用作页面背景图，更推荐用CSS实现，这样能更好地控制文本与背景的层级关系，修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Smart UV</title>
    <style>
        .container {
            width: 100%;
            height: 600px; /* 根据需求设置容器高度 */
            background-image: url('./images/pexels-cats-coming-707582.jpg');
            background-size: cover; /* 让背景图铺满容器 */
            background-position: center; /* 背景图居中显示 */
        }
    </style>
</head>
<body>
    <div>
        <h1>SmartUV</h1>
        <nav class="topnav-right">
          <a href="#">Home</a>
          <a href="#">Products</a>
          <a href="#">How it works</a>
          <a href="#"></a>
        </nav>

        <div class="container">
            <!-- 这里可以放置需要显示在背景上的文本内容 -->
        </div>
    </div>
</body>
</html>

额外提醒 #

• 确保图片文件名和路径拼写完全正确，部分系统或服务器对大小写敏感。
• 启动本地服务时，要以项目根目录作为服务的根目录，不要直接双击打开HTML文件。

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