不允许加载本地资源 html 图片

在HTML中，使用相对路径或绝对路径引入图片是很常见的做法，但是有时候我们会遇到这样的情况：当我们把HTML页面放到本地进行测试时，页面上指定的图片不能够正常加载出来，浏览器控制台报出“不允许加载本地资源”的错误信息。那么，为什么会出现这个错误信息呢？该如何解决呢？

错误原因

浏览器在加载页面时，会有安全策略限制，禁止在页面中加载本地文件。这个安全策略称为“同源策略”。同源策略是浏览器的一项安全功能，用于防止恶意网站窃取数据。所谓的“同源”，指的是协议、域名、端口号均相同的两个地址，如果两个地址不同源，浏览器就无法获取对应的资源。

比如，如果我们通过file协议打开页面，那么页面中引入的图片相对路径就是相对于本地磁盘的路径，这样会导致浏览器无法加载图片，因为这个路径不符合同源策略要求。

解决方法

1. 使用绝对路径

使用绝对路径可以规避相对路径的问题，但是需要注意的是，浏览器会以当前网站根目录为基础去解析绝对路径。例如，我们的文件目录结构如下：

- root
    - index.html
    - images
        - bg.jpg

我们需要在index.html中引入bg.jpg，可以使用以下代码：

<img src="/images/bg.jpg" alt="bg">

2. 使用HTTP服务器

本地文件系统不能像HTTP服务器那样运行动态网页，因此无法通过文件系统访问JavaScript。在处理JavaScript和CSS等内容时，HTTP服务器用于向客户端提供Web内容。在开发过程中，如果没有可用的服务器，可以使用Node.js在本地搭建HTTP服务器。由于使用HTTP服务器时地址发生了变化，因此在这种情况下也需要使用绝对路径。

3. 修改浏览器安全策略

在某些情况下，可以通过修改浏览器的安全策略来允许本地资源加载，但是这种方法不推荐使用，因为它会降低浏览器的安全性。如果需要解决这个问题，可以在浏览器地址栏中输入以下命令：

chrome://flags/#allow-insecure-localhost

然后将“Allow invalid certificates for resources loaded from localhost.”这个标志设置为“Enabled”。但是谷歌浏览器貌似已经不支持这种方法了。

总结

在本地开发过程中，经常会遇到无法加载本地资源的问题。这时候，可以使用绝对路径、HTTP服务器或者修改浏览器安全策略等方法来解决。总的来说，为了避免由于同源策略引起的无法加载本地资源的问题，推荐使用HTTP服务器来进行开发和测试。