HTML/CSS问题:由于交叉来源读取阻塞问题，背景图像没有加载。

Question

对于我的项目，我必须从我的图像托管站点加载一个图像，我使用了我的github存储库。我的CSS代码是这样的，

#main-section{
    background-image : url("https://github.com/<mypath>/myphoto.jpg");
}

这是我的HTML

<section id="main-section">
    <header>
        <h1>Hello Test</h1>
    </header>
</section>

然而，我在我的Chrome浏览器中得到了CORB问题。在Chrome控制台中，错误看起来是，

A cookie associated with a cross-site resource at https://github.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

portfolioWebpage.html#about-us:1 A cookie associated with a cross-site resource at http://github.com/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://github.com/<mypath>/myphoto.jpg with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details. 

据我所知，跨源问题可以通过JavaScript和其他脚本方式来处理。但是我觉得我不知道如何只用HTML和CSS来解决这个问题。你能提出什么建议吗？

任何帮助都是非常感谢的。

Answer 1

错误消息显示MIME类型为text/html，这意味着服务器声称它是一个HTML。

因为您是从Github请求图像，这可能是因为它是--一个文档(可能是一个设计为包含一个<img>元素以显示存储在存储库中的图像的文档)。

您需要使用实际图像的URL。

Answer 2

在您的图像URL中有一个错误:背景图像：url("https://github.com/<mypath>/myphoto.jpg");

您正在看到的这个<mypath>中有一个占位符，您需要用实际的路径来更改它，您不能使用它。因此，编辑URL并使用正确的URL对图像。