无法将图像和辅助页连接到GitHub index.html
无法将图像和辅助页连接到GitHub index.html
提问于 2022-02-18 16:44:30
我是一个学生，这是我第一次使用GitHub页面。我正在寻找帮助链接我的次要网页和图片，是在我的储存库文件夹。
我将HTML和CSS页面推送到GitHub，并创建了一个GitHub页面。我的图像都没有显示，链接也无法工作，因为地址不在我的计算机中，而是在GitHub上。我想不出如何为图像找到合适的地址。
我开始为一个学校项目制作一个网站，但在我们更进一步之前，我们必须把这个网页放到GitHub页面上。当我通过VSCode运行html页面时，每个页面都能完美地处理图像和链接。现在我正在使用GitHub页面，我的图片或链接都没有工作/显示。我知道我必须通过GitHub页面将代码中每个地址的url分别更改为新地址，但我从其他问题中研究的所有内容都不适合我。
我的"index.html“和它的css "landingpage.css”位于主分支上。图像位于主分支"img“上的一个文件夹下。//我遇到的第一个问题是“框架- 2@1x.png”文件夹下的背景图片。辅助页位于主分支“链接页”的文件夹下。
我还没有开始尝试链接第二个页面，因为我的第一个目标是使“主页”再次具有所需的外观，但是在尝试多个不同的地址之后，图像将不会显示出来。
单击"img“文件夹下的图像后，我尝试复制路径:/img/frame 2@1x.png或img/frame 2@1x.png，以及复制permalink地址，即"https://github.com/vjsarlo/bioSite/blob/c0ef6aef3fb0f37ff63152338909086ba94bb486/img/frame-2@1x.png"”。
我已经读到，我可能需要使用“原始绝对链接”在这里回答这里的第一个评论(没有给出答案向上表决)：Images in github pages and relative links，但我找不到如何获得“原始绝对链接”。
下面是我为html和相应的css编写的代码。CSS是第93-103行，HTML是第1-17行：
背景“框架”所在的HTML部分：
@import url("https://fonts.googleapis.com/css?family=Abel:400|Adamina:400|Abhaya+Libre:400|Advent+Pro:500");
/* !! Figure Out Slider If Wanted !! Image Imported For Reference Of Placing and Look !! */
/* Style Guide Variables */
:root {
--black: rgba(0, 0, 0, 1);
--bg: rgba(11, 29, 38, 1);
--accent: rgba(251, 215, 132, 1);
--white: rgba(255, 255, 255, 1);
--font-size-m2: 18px;
--font-size-l2: 24px;
--font-size-xl2: 36px;
--font-size-xxl: 48px;
--font-size-xxxl: 64px;
--font-size-xxxxl: 96px;
--font-size-xxxxxl: 240px;
--font-family-abel: "Abel";
--font-family-abhaya_libre: "Abhaya Libre";
--font-family-adamina: "Adamina";
--font-family-advent_pro: "Advent Pro";
}
/* Preset Classes */
.abel-normal-white-240px {
color: var(--white);
font-family: var(--font-family-abel);
font-size: var(--font-size-xxxxxl);
font-weight: 400;
font-style: normal;
}
.abhayalibre-normal-white-64px {
color: var(--white);
font-family: var(--font-family-abhaya_libre);
font-size: var(--font-size-xxxl);
font-weight: 400;
font-style: normal;
}
.adamina-normal-grandis-48px {
color: var(--accent);
font-family: var(--font-family-adamina);
font-size: var(--font-size-xxl);
font-weight: 400;
font-style: normal;
}
.adamina-normal-grandis-18px {
color: var(--accent);
font-family: var(--font-family-adamina);
font-size: var(--font-size-m2);
font-weight: 400;
font-style: normal;
}
.abel-normal-white-18px {
color: var(--white);
font-family: var(--font-family-abel);
font-size: var(--font-size-m2);
font-weight: 400;
font-style: normal;
}
.abel-normal-grandis-18px {
color: var(--accent);
font-family: var(--font-family-abel);
font-size: var(--font-size-m2);
font-weight: 400;
font-style: normal;
}
.adventpro-medium-white-18px {
color: var(--white);
font-family: var(--font-family-advent_pro);
font-size: var(--font-size-m2);
font-weight: 500;
font-style: normal;
}
/* HEADER */
* {
box-sizing: border-box;
}
.hidden,
.hidden * {
pointer-events: none;
visibility: hidden;
}
.overlap-group-1 {
height: 4232px;
position: relative;
width: 1940px;
}
.frame {
background-image: url(https://github.com/vjsarlo/bioSite/blob/c0ef6aef3fb0f37ff63152338909086ba94bb486/img/frame-2@1x.png);
background-position: 50% 50%;
background-size: cover;
height: 1529px;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
width: 1920px;
}
.slider {
height: 440px;
left: 1663px;
position: absolute;
top: 226px;
width: 277px;
}
.content-top {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 197px;
left: 500px;
position: absolute;
top: 287px;
width: 950px;
}
.group-1 {
align-items: center;
display: flex;
height: 65px;
min-width: 333px;
padding: 0 0px;
}
.rectangle {
background-color: var(--accent);
height: 4px;
margin-top: 3px;
width: 120px;
}
.meet {
color: var(--accent);
font-family: var(--font-family-adamina);
font-size: var(--font-size-xxl);
font-weight: 400;
letter-spacing: 6px;
margin-left: 41px;
min-height: 65px;
min-width: 170px;
}
.kaley-mc-carthy {
color: var(--white);
font-family: var(--font-family-abhaya_libre);
font-size: var(--font-size-xxxxl);
font-weight: 400;
letter-spacing: 0;
line-height: 100px;
margin-top: 32px;
min-height: 100px;
text-align: center;
white-space: nowrap;
width: 950px;
}
.header {
align-items: flex-start;
display: flex;
height: 52px;
left: 80px;
position: absolute;
top: 64px;
width: 1760px;
}
.logo {
color: var(--white);
font-family: var(--font-family-abhaya_libre);
font-size: var(--font-size-xl2);
font-weight: 400;
letter-spacing: 0.36px;
min-height: 42px;
width: 253px;
text-underline-position: auto;
height: 37px;
width: 346px;
}
.about-me {
cursor: pointer;
transition: all 0.2s ease;
height: 23px;
letter-spacing: 0;
margin-left: 393px;
margin-top: 2px;
min-width: 64px;
}
.hobbies {
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0;
margin-left: 66px;
margin-top: 2px;
min-height: 23px;
min-width: 55px;
}
.connect {
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0;
margin-left: 60px;
margin-top: 2px;
min-height: 23px;
}
.connect:hover,
.hobbies:hover,
.about-me:hover {
color: #fbd784;
}
/* CONTENT */
.content {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 2772px;
left: 271px;
position: absolute;
top: 1460px;
width: 1465px;
}
.content-1 {
align-items: center;
display: flex;
margin-left: 1px;
min-width: 1463px;
}
.overlap-group-2 {
height: 579px;
margin-bottom: 72.58px;
position: relative;
width: 789px;
}
.equipment-01 {
left: 0;
letter-spacing: 0;
line-height: 240px;
opacity: 0.1;
position: absolute;
top: 0;
white-space: nowrap;
width: 248px;
}
.content-2 {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 377px;
left: 157px;
position: absolute;
top: 202px;
width: 632px;
}
.tagline-01 {
align-items: center;
display: flex;
height: 25px;
min-width: 255px;
}
.line {
background-color: var(--accent);
height: 2px;
margin-bottom: 3px;
width: 72px;
}
.who-am-i {
letter-spacing: 6px;
margin-left: 24px;
min-height: 25px;
min-width: 157px;
}
.the-princess {
letter-spacing: 0;
margin-top: 27px;
min-height: 152px;
width: 555px;
}
.with-a-passion {
letter-spacing: 0;
line-height: 32px;
margin-top: 27px;
min-height: 96px;
width: 632px;
}
.more:hover {
transform: scale(1.1);
}
.more {
align-items: center;
cursor: pointer;
display: flex;
height: 23px;
margin-top: 27px;
min-width: 199px;
transition: all 1s ease-in-out;
}
.learn-about-me {
letter-spacing: 0;
min-height: 23px;
min-width: 105px;
}
.iconnavigationarrow_downward_24px {
height: 17px;
margin-bottom: 0;
margin-left: 9px;
width: 24px;
}
.image-1 {
height: 728px;
margin-left: 101px;
object-fit: cover;
width: 573px;
}
.content-3 {
align-items: center;
display: flex;
margin-left: 1px;
margin-top: 200px;
min-width: 1463px;
}
.image-2 {
height: 732px;
object-fit: cover;
width: 567px;
}
.overlap-group-3 {
height: 579px;
margin-bottom: 75.37px;
margin-left: 114px;
position: relative;
width: 775px;
}
.equipment-02 {
left: 0;
letter-spacing: 0;
line-height: 240px;
opacity: 0.1;
position: absolute;
top: 0;
white-space: nowrap;
width: 243px;
}
.content-4 {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 377px;
left: 143px;
position: absolute;
top: 202px;
width: 632px;
}
.tagline-02 {
align-items: center;
display: flex;
height: 25px;
min-width: 276px;
}
.my-hobbies {
letter-spacing: 6px;
margin-left: 24px;
min-height: 25px;
min-width: 178px;
}
.gross-food {
letter-spacing: 0;
margin-top: 27px;
min-height: 152px;
width: 555px;
}
.cows-brain {
letter-spacing: 0;
line-height: 32px;
margin-top: 27px;
min-height: 96px;
width: 632px;
}
.more-1:hover {
transform: scale(1.1);
}
.more-1 {
align-items: center;
cursor: pointer;
display: flex;
height: 23px;
margin-top: 27px;
min-width: 199px;
transition: all 1s ease-in-out;
}
.discover-more {
letter-spacing: 0;
min-height: 23px;
min-width: 96px;
}
.iconnavigationarrow_downward_24px-2 {
height: 16px;
margin-left: 15px;
margin-top: 1px;
width: 24px;
}
.content-5 {
align-items: flex-start;
display: flex;
margin-top: 200px;
min-width: 1465px;
}
.equipment-2 {
letter-spacing: 0;
line-height: 240px;
margin-top: 48.13px;
min-height: 304px;
opacity: 0.1;
width: 249px;
}
.image-3 {
height: 912px;
margin-left: 643px;
object-fit: cover;
width: 574px;
}
.content-7 {
align-items: flex-start;
display: flex;
flex-direction: column;
height: 529px;
left: 419px;
position: absolute;
top: 3570px;
width: 632px;
}
.tagline-03 {
align-items: center;
display: flex;
height: 25px;
min-width: 413px;
}
.follow-my-journey {
letter-spacing: 6px;
margin-left: 24px;
min-height: 25px;
min-width: 315px;
}
.where-will-i-be {
letter-spacing: 0;
margin-top: 27px;
min-height: 304px;
width: 555px;
}
.my-journey-has-been {
letter-spacing: 0;
line-height: 32px;
margin-top: 27px;
min-height: 96px;
width: 632px;
}
.more-2:hover {
transform: scale(1.1);
}
.more-2 {
align-items: center;
cursor: pointer;
display: flex;
height: 23px;
margin-top: 27px;
min-width: 199px;
transition: all 1s ease-in-out;
}
.discover-more-1 {
letter-spacing: 0;
min-height: 23px;
min-width: 150px;
}
.iconnavigationarrow_downward_24px-3 {
height: 16px;
margin-left: 23px;
margin-top: 1px;
width: 24px;
}
/* FOOTER */
.footer {
align-items: flex-start;
align-self: center;
display: flex;
height: 190px;
margin-left: 9px;
margin-top: 57px;
min-width: 1529px;
}
.kaley-mccarthy {
align-items: flex-start;
background-color: var(--bg);
display: flex;
flex-direction: column;
height: 4672px;
overflow: hidden;
width: 1920px;
}
.flex-col {
align-items: flex-start;
display: flex;
flex-direction: column;
min-height: 190px;
width: 319px;
}
.kaley {
color: var(--white);
font-family: var(--font-family-abhaya_libre);
font-size: var(--font-size-xl2);
font-weight: 400;
letter-spacing: 0.36px;
min-height: 42px;
width: 253px;
}
.its-a-dangerous {
letter-spacing: 0;
line-height: 32px;
margin-top: 20px;
min-height: 128px;
width: 319px;
}
.links {
align-items: center;
align-self: center;
display: flex;
flex-direction: column;
margin-bottom: 3px;
margin-left: 984px;
min-height: 181px;
width: 232px;
}
.connect-1 {
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0;
line-height: 32px;
margin-bottom: 0;
margin-right: 40.65px;
margin-top: 16px;
min-height: 32px;
white-space: nowrap;
width: 57px;
}
.about-her {
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0;
line-height: 32px;
margin-bottom: 0;
margin-right: 23.8px;
margin-top: 21px;
min-height: 32px;
white-space: nowrap;
width: 74px;
}
.explore-kaley-mc-carthy {
color: var(--accent);
font-family: var(--font-family-abel);
font-size: var(--font-size-l2);
font-weight: 400;
letter-spacing: 0;
line-height: 32px;
margin-bottom: 0;
margin-right: 8px;
min-height: 32px;
white-space: nowrap;
width: 224px;
}
.her-hobbies {
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0;
line-height: 32px;
margin-bottom: 0;
margin-right: 6.95px;
margin-top: 16px;
min-height: 32px;
white-space: nowrap;
width: 91px;
}
.valign-text-middle {
display: flex;
flex-direction: column;
justify-content: center;
}
.about-her:hover,
.her-hobbies:hover,
.connect-1:hover {
color: #fbd784;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="landingpage.css" />
</head>
<body>
<div class="kaley-mccarthy screen">
<div class="overlap-group-1">
<div class="frame"></div>
<img class="slider" src="/Users/vince/csd/bioSite/img/slider@2x.svg" />
<div class="content-top">
<div class="group-1">
<div class="rectangle"></div>
<div class="meet">MEET</div>
</div>
<h1 class="kaley-mc-carthy">Kaley McCarthy</h1>
</div>
<h2>
<div class="header">
<div class="logo">Kaley McCarthy</div>
<a href="/Users/vince/csd/bioSite/link-pages/aboutpage.html" target="_blank">
<div class="about-me valign-text-middle abel-normal-white-18px">About Me</div>
</a>
<a href="/Users/vince/csd/bioSite/link-pages/hobbiespage.html" target="_blank">
<div class="hobbies abel-normal-white-18px">Hobbies</div>
</a>
<a href="/Users/vince/csd/bioSite/link-pages/connectpage.html" target="_blank">
<div class="connect abel-normal-white-18px">Connect</div>
</a>
</div>
</h2>
<div class="content">
<div class="content-1">
<div class="overlap-group-2">
<div class="equipment-01 abel-normal-white-240px">01</div>
<div class="content-2">
<h3 class="tagline-01">
<div class="line"></div>
<div class="who-am-i adamina-normal-grandis-18px">WHO AM I?</div>
</h3>
<div class="the-princess abhayalibre-normal-white-64px">
The Princess Who Will Eat Frog Legs
</div>
<div class="with-a-passion abel-normal-white-18px">
''With a passion for learning and discovering the world, I hope to
one day call the globe my home. While creating magic for visitors
from around the world has been my career, I now want to see the
magic that comes from their homes.''
</div>
<a href="/Users/vince/csd/bioSite/link-pages/aboutpage.html" target="_blank">
<div class="more">
<div class="learn-about-me abel-normal-grandis-18px">
Learn About Me
</div>
<img class="iconnavigationarrow_downward_24px" src="/Users/vince/csd/bioSite/img/icon-navigation-arrow-downward-24px-2@2x.svg"/>
</div>
</a>
</div>
</div>
<img class="image-1" src="/Users/vince/csd/bioSite/img/01.png" />
</div>
<div class="content-3">
<img class="image-2" src="/Users/vince/csd/bioSite/img/02.png" />
<div class="overlap-group-3">
<div class="equipment-02 abel-normal-white-240px">02</div>
<div class="content-4">
<h4 class="tagline-02">
<div class="line"></div>
<div class="my-hobbies adamina-normal-grandis-18px">MY HOBBIES</div>
</h4>
<div class="gross-food abhayalibre-normal-white-64px">
Gross Food, Open Doors, And Sore Feet
</div>
<div class="cows-brain abel-normal-white-18px">
''Cow's brain from New York has a mousse-texture. Pig's brain in
China is serve raw and you should "just know" how long to cook it
in a hot pot. Both places I've worn out a pair of shoes
traversing. Where will I go next?''
</div>
<a href="/Users/vince/csd/bioSite/link-pages/hobbiespage.html" target="_blank">
<div class="more-1">
<div class="discover-more abel-normal-grandis-18px">
Discover More
</div>
<img class="iconnavigationarrow_downward_24px-2" src="/Users/vince/csd/bioSite/img/icon-navigation-arrow-downward-24px-2@2x.svg"/>
</div>
</a>
</div>
</div>
</div>
<div class="content-5">
<div class="equipment-2 abel-normal-white-240px">03</div>
<img class="image-3" src="/Users/vince/csd/bioSite/img/03.png" />
</div>
</div>
<div class="content-7">
<h5 class="tagline-03">
<div class="line"></div>
<div class="follow-my-journey adamina-normal-grandis-18px">
FOLLOW MY JOURNEY
</div>
</h5>
<div class="where-will-i-be abhayalibre-normal-white-64px">
Where Will I be Tomorrow? What Food Can I Try? What Will I See?
</div>
<div class="my-journey-has-been abel-normal-white-18px">
''My journey has been filled with nothing short of wonder and amazement. I
want to share everything I'll discover with who ever is interested in
what the world really has to offer. My game show is the world, so what's
behind curtain number 1?''
</div>
<a href="/Users/vince/csd/bioSite/link-pages/connectpage.html" target="_blank">
<div class="more-2">
<div class="discover-more-1 abel-normal-grandis-18px">
Open Curtain Number 1
</div>
<img class="iconnavigationarrow_downward_24px-3" src="/Users/vince/csd/bioSite/img/icon-navigation-arrow-downward-24px-2@2x.svg"/>
</div>
</a>
</div>
</div>
<div class="footer">
<div class="flex-col">
<div class="kaley">Kaley McCarthy</div>
<div class="its-a-dangerous abel-normal-white-18px">
''It's a dangerous business, Frodo, going out of your door. You step into
the Road, and if you don't keep your feet, there is no knowing where you
might be swept off too.''
</div>
</div>
<div class="links">
<div class="explore-kaley-mc-carthy">Explore Kaley McCarthy</div>
<a href="/Users/vince/csd/bioSite/link-pages/aboutpage.html" target="_blank">
<div class="about-her adventpro-medium-white-18px">About Her</div>
</a>
<a href="/Users/vince/csd/bioSite/link-pages/hobbiespage.html" target="_blank">
<div class="her-hobbies adventpro-medium-white-18px">Her Hobbies</div>
</a>
<a href="/Users/vince/csd/bioSite/link-pages/connectpage.html" target="_blank">
<div class="connect-1 adventpro-medium-white-18px">Connect</div>
</a>
</div>
</div>
</div>
</body>
</html>
在运行VSCode时，背景图像没有显示在页面的顶部。所有的图片都没有出现，但是我只是在寻求帮助，这样我就可以从这个答案中找出其余的。
GitHub仓库：https://github.com/vjsarlo/bioSite
我有什么办法解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-02-18 17:01:55
编辑！找到了解决办法。也许不是最好的？
在我的存储库中的"img“文件夹中单击图像本身之后，我复制了页面顶部的url。在我从三个“.”复制这条路之前菜单在GitHub中。这起作用了，背景图像现在显示出来，就像从VSCode运行时一样。我会发布一个与此更新，如果它工作的每一个图像，从这里出来。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71177041
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号