html+css制作的网页在别人电脑上图片无法加载

在我们制作网页完成后，我们将网页的代码压缩成压缩包后，想要在别的地方打开时，发现打开的网页界面与自己测试看到的不一样。

在别人电脑上的效果

本应该的效果

可能看到上面的界面，相较于我们写代码时展现的界面，缺少了css的样式（如果是外部链接）和图片加载不出来的情况

对此，可能是以下三种情况

一、路径问题

（1）可能是文件里的图片和css的路径书写错误

正确的写法：

<img src="2.jpg" alt="图片无法显示时，显示的文字"><!--当图片与文件在当前目录中时-->
<img src="./1.jpg" alt=""><!--与上面表示相同，图片与文件在当前目录中-->
<img src="/data/1.jpg" alt=""><!--/ 表示根目录，就是在跟目录中找图片-->
<img src="../data/1.jpg" alt=""><!--表示在上一级目录中寻找图片-->

上面是相对路径的写法

<img src="https://seopic.699pic.com/photo/50118/7101.jpg_wh1200.jpg" alt="">
<img src="F:\C语言\chap.c\.vscode\website\data\1.jpg" alt="">

上面是相对路径的写法

（2）可能是路径写为绝对路径。

如果想要自己的网页可以使得别人可以看到，则需要将绝对路径改为相对路径才可以在别人电脑上正常的打开

修改路径时，css文件和图片的路径都需要修改为相对路径

二、站点问题

制作网页的时候，需要在电脑中创建一个文件夹用来存储网页的代码和网页中涉及到的图片和视频等资源。在压缩文件夹成为压缩包时，包含网页资源的文件夹也应当一起压缩。

可以采取以上的创建方式，相对应的东西存储在相对应的文件夹中，然后将以上四个文件放在一个大文件夹中。

大文件夹的压缩避免因为压缩的时候缺少了资源和样式等的文件夹，而使得网页的效果与我们写代码的时候不一样。

三、解压问题

如果检查到以上均没有问题，但是我们在看到的网页的效果依旧不是我们在自己电脑未压缩之前的效果。这可能是因为我们直接点击了压缩文件，而没有解压压缩包。

直接点击压缩文件打开的是单个文件夹，不能联系到其他的文件夹里面的东西，造成了打开的网页里缺少图片，样式等。解压整个文件夹使得各个文件夹都可以使用，从而避免了资源缺少对网页效果带来的影响。