无论路径如何,图像都不会显示
Images not showing up regardless of path
我刚刚启动了一个非常简单的网站,只有 5 张图片。无论 img 标签中的路径如何,其中 4 张图像都不会显示。无论 img 标签中的路径如何,第 5 个图像始终显示。
我试过"images/imagename.jpg"、“/images.imagename.jpg”、“../images.imagename.jpg”。
我试过将图像放在根目录中并使用 src="imagename.jpg".
未显示的图像在控制台中有此警告:
这是当前代码:
http://avalynncirce.com/perduco
<!DOCTYPE html>
<html>
<head>
<style>
img {max-height: 100vh;}
</style>
</head>
<body>
<div style="width:20%; float:left; position: fixed;">
<nav>
<ul>
<li><a href="#sv1">Workflow v1 Scatterplot</a></li>
<li><a href="#mv1">Workflow v1 Menu</a></li>
<li><a href="#sv2">Workflow v2 Scatterplot</a></li>
<li><a href="#mt">Collaboration Tool: Sketch (MAC and Online)</a></li>
<li><a href="#mt2">Collaboration Tool Tool: Figma (Windows)</a></li>
</ul>
</nav>
</div>
<div style="width:75%; float:right;">
<section id="sv1">
<hr style="margin: 50px;">
<img src="/images/scatterplotv1.png">
</section>
<section id="mv1">
<hr style="margin: 50px;">
<img src="../images/menuv1.png">
</section>
<section id="sv2">
<hr style="margin: 50px;">
<img src="../images/perduco.png">
</section>
<section id="mt">
<hr style="margin: 50px;">
<img src="../images/perduco-sketch.png">
</section>
<section id="mt2">
<hr style="margin: 50px;">
<img src="../images/figma.png">
</section>
</div>
</body>
</html>
让您的文件夹看起来像这样。并在下面 HTML 尝试图像。
<img src="images/logo.png" alt="logo"/>
"../images/imagename.jpg" 将在您的根文件夹(或从“/images”开始的一个文件夹)中查找它。
我总是使用“./images/imagename.jpg”,它总是有效。
您的浏览器可能无法正确缓存图像。尝试打开开发人员工具(如果使用 chrome)选择网络选项卡并在开发工具打开时禁用缓存。
否则,请在开发工具中检查您的控制台,以了解可能存在的错误以及它们未显示的原因。
这种情况以前从未发生过,我不确定这次为什么会发生,但有问题的图像文件被设置为私有。我使用 Filezilla 上传文件。右键单击服务器图像会弹出一个菜单,我可以在其中更改隐私设置。
我刚刚启动了一个非常简单的网站,只有 5 张图片。无论 img 标签中的路径如何,其中 4 张图像都不会显示。无论 img 标签中的路径如何,第 5 个图像始终显示。
我试过"images/imagename.jpg"、“/images.imagename.jpg”、“../images.imagename.jpg”。 我试过将图像放在根目录中并使用 src="imagename.jpg".
未显示的图像在控制台中有此警告:
这是当前代码: http://avalynncirce.com/perduco
<!DOCTYPE html>
<html>
<head>
<style>
img {max-height: 100vh;}
</style>
</head>
<body>
<div style="width:20%; float:left; position: fixed;">
<nav>
<ul>
<li><a href="#sv1">Workflow v1 Scatterplot</a></li>
<li><a href="#mv1">Workflow v1 Menu</a></li>
<li><a href="#sv2">Workflow v2 Scatterplot</a></li>
<li><a href="#mt">Collaboration Tool: Sketch (MAC and Online)</a></li>
<li><a href="#mt2">Collaboration Tool Tool: Figma (Windows)</a></li>
</ul>
</nav>
</div>
<div style="width:75%; float:right;">
<section id="sv1">
<hr style="margin: 50px;">
<img src="/images/scatterplotv1.png">
</section>
<section id="mv1">
<hr style="margin: 50px;">
<img src="../images/menuv1.png">
</section>
<section id="sv2">
<hr style="margin: 50px;">
<img src="../images/perduco.png">
</section>
<section id="mt">
<hr style="margin: 50px;">
<img src="../images/perduco-sketch.png">
</section>
<section id="mt2">
<hr style="margin: 50px;">
<img src="../images/figma.png">
</section>
</div>
</body>
</html>
让您的文件夹看起来像这样。并在下面 HTML 尝试图像。
<img src="images/logo.png" alt="logo"/>
"../images/imagename.jpg" 将在您的根文件夹(或从“/images”开始的一个文件夹)中查找它。 我总是使用“./images/imagename.jpg”,它总是有效。
您的浏览器可能无法正确缓存图像。尝试打开开发人员工具(如果使用 chrome)选择网络选项卡并在开发工具打开时禁用缓存。
否则,请在开发工具中检查您的控制台,以了解可能存在的错误以及它们未显示的原因。
这种情况以前从未发生过,我不确定这次为什么会发生,但有问题的图像文件被设置为私有。我使用 Filezilla 上传文件。右键单击服务器图像会弹出一个菜单,我可以在其中更改隐私设置。