该图像不会显示在另一页中答案

【问题标题】：The image wont show up in an another page该图像不会显示在另一页中
【发布时间】：2022-12-04 23:50:55
【问题描述】：

我从 odin 项目和当前 im 学习到图像部分，我需要在另一个页面“关于页面”部分显示图像，但它不会显示，它只是主页上的损坏图像。

<!DOCTYPE html>

<html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Links</title>

    </head>
        <body>
            <h1>Homepage</h1>
               <p><a href="https://www.theodinproject.com/about">click me</a></p>

               <p><a href="pages/about.html">About</a></p>
               <img src="../images/dog.jpg">
               <img src="https://www.theodinproject.com/mstile-310x310.png" alt="The Odin Project Logo">
        </body>

</html>

【问题讨论】：

标签： html image hyperlink

【解决方案1】：

您可以通过两种方式修复 HTML 图像未显示在浏览器中的问题：

检查<img>标签的src路径
检查服务器或浏览器的缓存

检查 <img> 标签的 src 路径

HTML 中的每个图像都是通过使用 <img> 标记和 src 属性中指定的图像源来呈现的。

您可以根据放置图像的位置将 relative path 或 absolute path 添加到 src 属性。如果您的图像本地保存在 HTML 文档位置旁边的文件夹中，那么您可以使用相对路径。

当你有正确的路径时，不要忘记检查图像扩展名并确保它在 src 和实际图像之间是相同的。

一旦图像 src 路径正确，那么您需要检查图像是否可以被您的服务器访问。

请记住，如果您使用 XAMPP、WAMP 或 MAMP 等本地开发服务器，则图像必须位于开发文件夹内。

对于 WAMP，图像必须位于 www/ 文件夹中，而对于 XAMPP 和 MAMP，您需要将图像放在 htdocs/ folder 中。最后，如果您使用的是 absolute path，请确保您没有将本地硬盘路径放置到 src 属性中。

检查服务器或浏览器的缓存

一旦您确认该图像在开发中可访问，由于缓存的原因，该图像可能仍会从您的生产站点中消失。图片不显示在网站上的原因是浏览器或服务器缓存仍然为访问者提供旧的 HTML 页面。

只有当您修改已发布的 HTML 文件以在页面上包含新图像时才会发生这种情况。

清除浏览器缓存可能因您使用的浏览器而异。如果您使用的是 Chrome，则可以通过打开开发者工具菜单然后右键单击重新加载图标来清除缓存。

【讨论】：