时间戳

首页 > 解决方案 > 为什么我的图像不能在 HTML 中正确显示？

html - 为什么我的图像不能在 HTML 中正确显示？

问题描述

出于某种原因，我的图像没有加载到我的 HTML 文档中。我检查了链接，它们都是有效的。如果我命令单击它们，它会显示图片。我不知道还能做什么。这是网站的完整代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="icon" href="/Users/evanmullen/Public/images/favIcon.ico">
        <title>Algobyte</title>
        <link rel="preconnect" href="https://fonts.gstatic.com">
        <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100&amp;display=swap" rel="stylesheet"> 
        <link rel="stylesheet" href="stylesheet.css">
        </head>
    <body style="background: #efefef;">
        <div class="header" id="mainHeader">
            <img src="Users/evanmullen/Public/images/cover.png" alt="algobyte logo" width="20%">
        </div>

        <div class="app-section">
            <h3>Apps</h3>
        <!--QuickrTippr-->
            <p class="center">
                <a href="https://apps.apple.com/us/app/quickrtippr/id1551206999">
                    <img src="Users/evanmullen/Public/images/WebsiteQuickrTippr.png" alt="QuickrTippr picture" width="20%" class="app-picture"></a>

        <!--Identicryst-->
            <img src="/Users/evanmullen/Public/images/WebsiteIdenticryst.png" alt="Identicryst picture" width="20%" class="app-picture">
            </p>
        </div>

        <div class="about-us">
            <h3>About Us</h3>
            <img src="Users/evanmullen/Public/images/bridge.jpg" alt="Bear Mountain Bridge, Cortlandt, NY" width="100%" class="center">
            <p class="center">
            We are a Hudson Valley, New York based software development company that strives to produce the highest quality software.
             </p>
        </div>


    </body>
</html>

我使用 Firebase 作为我的主机。

标签： htmlcssfirebasevisual-studioweb

解决方案

好的，所以这是很常见的事情。它没有显示，因为根据您提供文件的说明，浏览器无法找到图像....这是我所做的...由于您的标签，我假设您使用 VS，所以在您的项目所在的文件夹中，将您想要的图像上传或打开到您的 index.html 项目所在的同一文件夹中。一旦图像位于同一文件夹中，您只需将图像的名称更改为 src="imagename.png" 或 jpeg 或您使用的任何内容. 如果您不希望图像在同一文件夹中，则只需将它们保存到另一个文件夹但在项目的同一根文件夹中，然后通过右键单击并选择“复制相对路径”复制相对路径名称并将其包含在您的图像元素中..它看起来像这样...src="projects/image.png"。我希望能解释它并解决您的问题。快乐编码！

                <a href="https://apps.apple.com/us/app/quickrtippr/id1551206999">
          example ------> if in same folder as index.html          <img src="sophoto.png" alt="QuickrTippr picture" width="20%" class="app-picture"></a>

推荐阅读