文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在HTML文件中引用图像(在本地主机上运行时)

问如何在HTML文件中引用图像(在本地主机上运行时)
EN

Stack Overflow用户

提问于 2022-09-11 14:42:35

回答 1查看 28关注 0票数 -3

我的目标是创建一个HTML文件来呈现图像。我想将该项目压缩并与其他人共享，然后由他们在上运行他们的本地机器。

让我们假设我有一个index.html文件，它引用一个名为infographic.png的图像。此infographic.png文件保存在assets文件夹中。

我的文件结构是：

C://Users/name/Desktop/projects/project_2/index.html
C://Users/name/Desktop/projects/project_2/assets/infographic.png

当我使用JetBrains Webstorm检查网页时，我看到infographic.png文件按预期呈现。但是，当我通过Windows导航到机器上的index.html文件并双击index.html文件时，我发现infographic.png没有呈现(只有alt文本正在呈现)。

最初，我的代码是：

<img src="./assets/infographic.png" alt="Infographic of Salary Data">

(注意路径中的单点)

然后，我把它改成了一个双点(..)在文件路径中：

<img src="../assets/infographic.png" alt="Infographic of Salary Data">

而且，这似乎解决了这个问题。图像按预期呈现。

问题：是双点(.)引用这个文件的正确方法？还有别的办法吗？

提前感谢您的帮助！

更新：

index.html文件如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT"
          crossorigin="anonymous">

    <title>Example</title>
</head>
<body>

<h1 id="Example">Example</h1>

<hr>

<div class="container">
    <div id="title" class="row">
        <h4>Example</h4>
    </div>

    <div class="row">
        <div class="col-6 justify-content-center">
            <img src="./assets/infographic.png" alt="Infographic of Salary Data">
        </div>
        <div id="analysis" class="col-6">
            <h4>Analysis</h4>

            <p>this is some text commentary...</b>
        </div>
    </div>
</div>

</body>
</html>

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-09-11 14:56:38

/ means the root of the current drive;
./ means the current directory;
../ means the parent of the current directory.

引用文件的另一种方式是使用绝对路径。谷歌相对路径与绝对路径。我相信W3有一个教程。如果你想知道为什么人们会试图关闭这个问题，那是因为一个简单的google或堆栈溢出搜索会揭示出答案。你越帮助自己，别人就越会帮助你。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/73680175

复制

相似问题

问如何在HTML文件中引用图像(在本地主机上运行时)
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML文件中引用图像(在本地主机上运行时)EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在HTML文件中引用图像(在本地主机上运行时)
EN