As part of my project, I need to load an image from my image hosting site by using my github repository. The CSS code I am using for this task is as follows:
#main-section{
background-image : url("https://github.com/<mypath>/myphoto.jpg");
}
Below is the HTML snippet:
<section id="main-section">
<header>
<h1>Hello Test</h1>
</header>
</section>
However, I encountered a CORB issue in my Chrome browser. The error message displayed in the console is:
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.
I know that cross-origin problems can be resolved using JavaScript or other scripting methods. However, I'm unsure of how to address this issue purely with HTML and CSS. Any suggestions would be greatly appreciated.
Thank you in advance for any assistance!