为什么本地主机上的 .html 文件和网上上传的 .html 文件存在差异？答案

【问题标题】：why differences there in .html file on local host and .html file uploaded on web?为什么本地主机上的 .html 文件和网上上传的 .html 文件存在差异？
【发布时间】：2021-07-22 05:25:18
【问题描述】：

index.html

 <html>
    <head>
        <title>image</title>
    </head>
    <body>
        
        <p> 
            <img src="kRIsten stewart.jpg" width="200"  height="200"  alt="Kristen stewart" title="Kristen stewart" />
            <img src="pics/Emilia clarke.jpg" height="200" width="200" alt="emilia clarke" title="emilia clarke" />
            <img src="jordan-peterson.jpg" height="200" width="200" alt="jorden-peterson" title="jorden-peterson" />
            <img src="pics/Kate winslet.jpg" height="200" width="200" alt="kate winslet" title="kate winslet" />
            <img src="/4. Codes/HTML/hosted2/Mel robbins.jpg" height="200" width="200" alt="Mel robbins" title="Mel robbins"/>
            <img src="raining gif.gif" height="200" width="200" alt="raining gif" title="raining gif" />

            
        </p>

    </body>
</html>

位置：F:/4. codes/html/hosted2/

此 hosted2 文件夹托管在 surge.sh 上。它包含index.html 文件、jorden-peterson.jpg、kristen stewart.jpg、Mel robbins.jpg、raining.gif。它还包含一个名为pics 的文件夹，其中包含Emilia clarke.jpg 和kate winslet.jpg。

当我使用文件方案file:/// F:/... 打开这个index.html 时，所有 6 张图片都会显示在网络浏览器中。

但是当我通过它所在的 URL http://unsuitable-rate_bonapart.surge.sh/ 打开这个文件时，我看不到 kristen stewart.jpg 和 Mel robbins.jpg。这是为什么呢？

1.克里斯汀·斯图尔特.jpg。

我在 index.html 文件 KRIsten Stewart.jpg 中给出路径时将 2 个字母设为大写。但文件的位置是 kristenstewart.jpg

5.Mel robbins.jpg

/4. Codes/HTML/hosted2/Mel robbins.jpg 我给了绝对路径。

所以我在上传时在浏览器上的感觉是我上传了hosted2 文件夹，所以它不知道上层文件夹（hosted2）所以它不能显示Mel robbins.jpg 和kristen stewart.jpg。我觉得这是由于surge.sh 可能有文件名应该区分大小写的政策。

所以我有这种感觉。我不确切知道。请解释为什么会这样。

【问题讨论】：

网络服务器和/或网络服务器运行的操作系统决定文件名是否区分大小写。在 linux 系统上，名称区分大小写，在 windows 系统（如您的 PC）上，名称不区分大小写。因此，在您的 PC 上它可以正常工作，但在名称区分大小写的已部署服务器上，文件名“kRIsten Stewart.jpg”与“kristen Stewart.jpg”不同。事实上，unsuitable-rate_bonapart.surge.sh/kristen%20stewart.jpg 工作得很好。

标签： html image web-hosting case-sensitive

【解决方案1】：

首先不要在您的 img src 中使用空格（用“-”或“_”替换它们）。

如果您的 kristen-stewart 的文件名为 kristen-stewart.jpg，则使用 kristen-stewart.jpg 而不是 kRIsten-stewart.jpg。

然后 /4。 Codes/HTML/hosted2/Mel robbins.jpg 不是绝对路径。绝对路径将是（例如）https://yourdomainname.com/yourimage.jpg。所以也许考虑相对路径或有效的绝对路径。

注意：在你的 src 开头添加“./”以使用相同的文件夹和“../”移动到上层文件夹。

【讨论】：

then call it by kristen-stewart.jpg not kRIsten-stewart.jpg. 我的 Q 是为什么它正在运行 file:///
"./" at the beginning of your src 移动到根目录
stackoverflow.com/a/68453187/11862989 检查它是否是绝对路径？