在 HTML 中访问文件夹结构中的图像答案

【问题标题】：Access image in folder structure in HTML在 HTML 中访问文件夹结构中的图像
【发布时间】：2021-02-03 12:02:37
【问题描述】：

我正在尝试在我的 index.ejs 页面中放置一个对象：

<img src="../images/logowhite.png" alt="white logo">

下面是我的文件夹结构： folder structure

当我尝试打开网页时，图像不显示，显示一个小图标并显示替代文本。

【问题讨论】：

【解决方案1】：

您必须删除 src 开头的点。

这样

&lt;img src="/images/logowhite.png" alt="white logo"&gt;

如果这不起作用，请尝试不使用第一个斜杠，那应该可以

【讨论】：

【解决方案2】：

您必须在 src 属性中为图像使用绝对路径。要做到这一点：- 1.转到您放置图像的文件。 2.右键单击该文件，您将看到绝对路径选项。 3.点击那个选项 4.回到html并把路径粘贴到src中，然后重试页面。

【讨论】：

【解决方案3】：

<img src="./images/logowhite.png" alt="white logo">

使用 ./ 指定它是从当前目录开始的文件夹。

编辑实际上这行不通，我注意到 index.ejs 在视图中。你能把 index.ejs 文件中的代码贴出来吗？

Edit2 如果你在 node js 上运行项目或使用 webpack：

const img = require('../images/logowhite.png');
<img src={img} alt="white logo">

【讨论】：

【解决方案4】：

使用右键单击在新标签中打开图像（未显示），并找到图像 URL 不匹配的位置。
并在新标签中打开实际图像（您想要的）。
并比较它们。

1。在“/images/pic.png”中首先使用“/”表示“abc.com/images/pic.png”或“abc.github.io/images/pic.png”。

首先不使用任何内容，即-“images/pic.png”表示在带有 url 的页面中：“abc.com/views/index.html”表示避免最后一部分“index.html”，即发送页面请求，如“abc.com/views/images/pic.png”或“abc.github.io/views/images/pic.png”代替“abc.github.io/views/index.html”。
并且斜杠前的每个点都证明了url中的目录，是要避免的，例如：Img url is - "abc.com/images/pic.png" and Page url is : "abc.com/js/索引.html" 然后将图像 url 写为“../images/pic.png”。
对于页面 url 为的子域：“abc.github.io/repo/js/index.html”和图像 url是“abc.github.io/repo/images/pic.png” 然后将图片网址写为“./images/pic.png”。

【讨论】：