时间戳

首页 > 解决方案 > HTML/CSS 问题：由于跨域读取阻塞问题，无法加载背景图像

html - HTML/CSS 问题：由于跨域读取阻塞问题，无法加载背景图像

问题描述

对于我的项目，我必须从我的图像托管站点加载图像，为此我使用了我的 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 来解决这个问题感到相当无能。你能建议什么吗？

任何帮助深表感谢。

标签： htmlcss

解决方案

错误消息说 MIME 类型是text/html这意味着服务器声称它是 HTML 文档。

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

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

推荐阅读