我的项目 | Img 定位和可见性问题
My project | Img positioning & visibility issues
我正在使用 UI 设计进行我的第一个项目，但我遇到了图像可见性方面的问题。我有图像在不应该显示的时候显示，也有图像根本不显示。其中一张图片也错位了，我正在寻求帮助。
This is what it's supposed to look like
正如你在上图中看到的，我应该有一个运球，github，以及右上角显示的 facebook 图标。但是，我的图像根本没有显示，就好像链接断开了一样。我已经单独打开文件，它们仍然是工作文件。这是它在我的屏幕上的样子：
What it looks like on my screen (code)
What is looks like on my screen (display)
我已经尝试了两个图像/[文件名] & 我试过复制完整路径并将其粘贴进去。None 其中有效。
此外，根据带有 class 和文件名“hero-image.svg”的图像，如您在第三张图像中所见，定位不正确。它也显示在移动视图中，因为它不应该那样做。我试过调整代码，但我想我花了太长时间来改变它，我什至不确定我是如何让它移动的。最后，这个“英雄形象”根本不应该显示在移动视图中。
我的代码和css将在下面发布。
值得一提的是，我使用的是 .scss (sass)。我不确定该信息是否有任何改变。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
body {
height: 100vh;
margin: 0;
font-family: 'Poppins', sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
image {
width: 100%;
}
.nav-container {
background: #6700ee;
a{
color: white;
}
}
header {
display: flex;
justify-content: space-between;
padding: 2em;
.logo {
color: #00f7ff;
font-weight: bold;
}
ul {
display: flex;
a{
display: block;
padding: 0 1em;
}
}
}
.social-header, .hero-design {
display: none;
}
.hero {
background: #6e00ff;
color: white;
display: grid;
text-align: center;
padding: 4em;
}
.meet {
display: flex;
margin: 0 auto;
width: 200px;
font-weight: bold;
color: #ff64cb;
span {
margin-top: 1em;
margin-right: .5em;
}
}
.scroll {
width: 30px;
margin-top: 2em;
}
section {
padding: 4em 2em;
text-align: center;
}
.featured {
position: relative;
}
.featured::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: #e5d5fa;
top: 0;
left: 0;
z-index: -1;
}
.subtitle {
text-transform: uppercase;
font-weight: bold;
color: #6e00ff;
letter-spacing: .2em;
font-size: .85em;
}
.featured-title {
color: black;
font-weight: bold;
font-size: 1.3em;
margin-top: -.4em;
display: block;
}
.featured-desc {
color: #3b3b3b;
margin-bottom: 3em;
font-size: .9em;
line-height: 1.8em;
font-weight: 500;
}
.skills {
background: #ff64cb;
}
.skills-container ul li {
background: white;
padding: 2em;
border-radius: 1em;
margin-bottom: 1em;
.icon-container {
height: 100px;
display: grid;
place-content: center;
margin: 0 auto;
&.one {
width: 50px;
}
&.two {
width: 100px;
}
&.three {
width: 60px;
}
}
.skill-title {
font-weight: bold;
}
.featured-desc {
margin-bottom: 2em;
}
}
.portfolio {
background: #f7f7f7;
}
.portfolio-container a img {
border-radius: 1em;
margin-bottom: 2em;
}
@media only screen and (min-width: 800px) {
.featured, .portfolio {
text-align: left;
}
.featured, .portfolio-container {
display: grid;
grid-template-columns: 40% auto;
}
.left, .portfolio-left {
display: grid;
place-content: center;
}
.right {
margin-left: 2em;
margin-top: 1em;
}
.skills {
margin-top: -5em;
margin-bottom: -7em;
padding-top: 7em;
}
.skills-container ul {
display: grid;
grid-template-columns: repeat(3, auto);
grid-gap: 1em;
}
.portfolio {
padding-top: 7em;
}
.portfolio-container img {
margin-left: 2em;
}
}
@media only screen and (min-width: 1050px) {
.hero {
height: 90vh;
}
.nav-container {
display: grid;
grid-template-columns: 66% auto;
background: unset;
header {
background: #6700ee;
}
}
header {
padding: 2em 2em 2em 4em;
}
.social-header {
padding: 2em 4em 2em 0;
}
section {
padding: 4em;
}
.social-header {
display: block;
ul {
display: flex;
justify-content: space-around;
width: 7em;
float: right;
img {
width: 20px;
}
}
}
.hero {
display: grid;
grid-template-columns: 66% auto;
background: unset;
padding: 0;
.content {
background: #6e00ff;
padding: 6em 8em 8em 4em;
text-align: left;
h1 {
font-size: 3em;
line-height: 1.2em;
}
}
}
.meet {
margin: unset;
}
.hero-design {
display: unset;
margin-left: -50%;
margin-top: 15%;
width: 100%;
}
.portfolio img {
float: right;
max-width: 500px;
}
}
@media only screen and (min-width: 1250px) {
header {
padding: 2em 2em 2em 10em;
}
.social-header {
padding: 2em 10em 2em 0;
}
section {
padding: 10em 10em 4em 10em;
}
.hero .content {
padding: 6em 8em 6em 10em;
}
}
@media only screen and (min-width: 1550px) {
header {
padding: 2em 2em 2em 20em;
}
.social-header {
padding: 2em 20em 2em 0;
}
section {
padding: 20em 10em 4em 20em;
}
.hero .content {
padding: 6em 8em 6em 20em;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My portfolio</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div class="nav-container">
<header>
<a href="index.html" class="logo">Isaiah Johnson</a>
<nav>
<ul>
<li><a href="">My Work</a></li>
<li><a href="">My Skills</a></li>
<li><a href="">Hire Me</a></li>
</ul>
</nav>
</header>
<div class="social-header">
<!-- MAKE SURE IMAGES ARE VISIBLE -->
<ul>
<li><a href=""><img src"images/dribble.png" alt="dribble"/></a></li>
<li><a href=""><img src"images/github.png" alt="github"/></a></li>
<li><a href=""><img src"C:\Users\dparr\OneDrive\Desktop\Web Dev\My Portfolio\images\facebook.png" alt="facebook"/></a></li>
</ul>
</div>
</div>
<div class="hero">
<div class="content">
<h1>YOUR FAVORITE WEB DESIGNER<br /> YOU HAVENT HIRED <br />YET</h1>
<div class="meet">
<span></span>
<p>Meet Isaiah Johnson</p>
</div>
<svg class="scroll" width="36" height="76" viewBox="0 0 36 76">
<g id="scroll" transform="translate(-186 -482)">
<g id="Rectangle_3" data-name="Rectangle 3" transform="translate(186 482)" fill="none" stroke="#fff" stroke-width="6">
<path d="M17.333,0H18A18,18,0,0,1,36,18V58A18,18,0,0,1,18,76h0A18,18,0,0,1,0,58V17.333A17.333,17.333,0,0,1,17.333,0Z" stroke="none"/>
<path d="M17.375,3H18A15,15,0,0,1,33,18V58A15,15,0,0,1,18,73h0A15,15,0,0,1,3,58V17.375A14.375,14.375,0,0,1,17.375,3Z" fill="none"/>
</g>
<g id="Rectangle_4" data-name="Rectangle 4" transform="translate(197 494)" fill="#fff" stroke="#707070" stroke-width="1">
<rect width="15" height="17" rx="7.5" stroke="none"/>
<rect x="0.5" y="0.5" width="14" height="16" rx="7" fill="none"/>
</g>
</g>
</svg>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="520" height="520" viewBox="0 0 520 520">
<g id="hero-image" transform="translate(-1006 -161)">
<rect id="Rectangle_5" data-name="Rectangle 5" width="130" height="130" rx="19" transform="translate(1266 161)" fill="#6e00ff"/>
<rect id="Rectangle_10" data-name="Rectangle 10" width="130" height="130" rx="19" transform="translate(1266 421)" fill="#6e00ff"/>
<rect id="Rectangle_7" data-name="Rectangle 7" width="130" height="130" rx="19" transform="translate(1396 291)" fill="#6e00ff" opacity="0.39"/>
<rect id="Rectangle_6" data-name="Rectangle 6" width="130" height="130" rx="19" transform="translate(1136 291)" fill="#fff"/>
<rect id="Rectangle_9" data-name="Rectangle 9" width="130" height="130" rx="19" transform="translate(1136 551)" fill="#fff"/>
<rect id="Rectangle_8" data-name="Rectangle 8" width="130" height="130" rx="19" transform="translate(1006 421)" fill="#fff" opacity="0.27"/>
<circle id="Ellipse_1" data-name="Ellipse 1" cx="64.5" cy="64.5" r="64.5" transform="translate(1266 291)" fill="#ff64cb"/>
<circle id="Ellipse_2" data-name="Ellipse 2" cx="64.5" cy="64.5" r="64.5" transform="translate(1136 422)" fill="#00f7ff"/>
</g>
</svg>
</div>
<!-- FEATURED PROJECT -->
<section class="featured">
<div class="left">
<div class="inner transition2">
<p class="subtitle">Featured Project</p>
<a href="" class="featured-title">DesignCourse.com ReDesign</a>
<p class="featured-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<img class="right transition2" src="images/designcourse.jpg" alt="Seductivebox">
</section>
<!-- SKILLS SECTION-->
<!-- UX DESIGN -->
<section class="skills">
<div class="skills-container">
<ul>
<li class="transition2">
<div class="icon-container one">
<img src="images/icons8-pointer-50.png" alt="UI/UX Icon">
</div>
<p class="skill-title">UI UX Design</p>
<p class="featured-desc skill-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</li>
<!-- FRONTEND DEVELOPMENT -->
<li class="transition2">
<div class="icon-container two">
<img src="images/frontend.svg" alt="frontend">
</div>
<p class="skill-title">Frontend Development</p>
<p class="featured-desc skill-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</li>
<!-- IDENTITY DESIGN -->
<li class="transition2">
<div class="icon-container three">
<img src="images/identity.svg" alt="identity">
</div>
<p class="skill-title">Identity Design</p>
<p class="featured-desc skill-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</li>
</ul>
</div>
</section>
<!-- PORTFOLIO SECTION -->
<!-- FIRST PROJECT -->
<section class="portfolio">
<div class="portfolio-container transition3">
<div class="portfolio-left">
<div class="inner">
<p class="subtitle">Lingerie Subscription Box</p>
<p class="featured-title">Seductivebox</p>
<p class="featured-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, nam!</p>
</div>
</div>
<a href=""><img src="images/seductivebox.jpg" alt="seductivebox"> </a>
</div>
<!-- SECOND PROJECT -->
<div class="portfolio-container transition3">
<div class="portfolio-left">
<div class="inner">
<p class="subtitle">Dog Dating App</p>
<p class="featured-title">Tindog</p>
<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, velit.</p>
</div>
</div>
<a href=""><img src="images/seductivebox.jpg" alt="seductivebox"> </a>
</div>
<!-- THIRD PROJECT -->
<div class="portfolio-container transition3">
<div class="portfolio-left">
<div class="inner">
<p class="subtitle">Vanilla Coding</p>
<p class="featured-title">Virtual Keyboard</p>
<p class="featured-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, soluta!</p>
</div>
</div>
<a href=""><img src="images/seductivebox.jpg" alt="seductivebox"> </a>
</div>
</section>
</body>
</html>
您的 src 图片中缺少 = 标志。
<img src="images/dribble.png" alt="dribble"/>
而不是
<img src"images/dribble.png" alt="dribble"/>
您缺少一个 = 标志，那么您的代码就可以了。
<img src="..." alt="...">
我正在使用 UI 设计进行我的第一个项目，但我遇到了图像可见性方面的问题。我有图像在不应该显示的时候显示，也有图像根本不显示。其中一张图片也错位了，我正在寻求帮助。
This is what it's supposed to look like
正如你在上图中看到的，我应该有一个运球，github，以及右上角显示的 facebook 图标。但是，我的图像根本没有显示，就好像链接断开了一样。我已经单独打开文件，它们仍然是工作文件。这是它在我的屏幕上的样子：
What it looks like on my screen (code)
What is looks like on my screen (display)
我已经尝试了两个图像/[文件名] & 我试过复制完整路径并将其粘贴进去。None 其中有效。
此外，根据带有 class 和文件名“hero-image.svg”的图像，如您在第三张图像中所见，定位不正确。它也显示在移动视图中，因为它不应该那样做。我试过调整代码，但我想我花了太长时间来改变它，我什至不确定我是如何让它移动的。最后，这个“英雄形象”根本不应该显示在移动视图中。
我的代码和css将在下面发布。
值得一提的是，我使用的是 .scss (sass)。我不确定该信息是否有任何改变。
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
body {
height: 100vh;
margin: 0;
font-family: 'Poppins', sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
image {
width: 100%;
}
.nav-container {
background: #6700ee;
a{
color: white;
}
}
header {
display: flex;
justify-content: space-between;
padding: 2em;
.logo {
color: #00f7ff;
font-weight: bold;
}
ul {
display: flex;
a{
display: block;
padding: 0 1em;
}
}
}
.social-header, .hero-design {
display: none;
}
.hero {
background: #6e00ff;
color: white;
display: grid;
text-align: center;
padding: 4em;
}
.meet {
display: flex;
margin: 0 auto;
width: 200px;
font-weight: bold;
color: #ff64cb;
span {
margin-top: 1em;
margin-right: .5em;
}
}
.scroll {
width: 30px;
margin-top: 2em;
}
section {
padding: 4em 2em;
text-align: center;
}
.featured {
position: relative;
}
.featured::before {
content: "";
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: #e5d5fa;
top: 0;
left: 0;
z-index: -1;
}
.subtitle {
text-transform: uppercase;
font-weight: bold;
color: #6e00ff;
letter-spacing: .2em;
font-size: .85em;
}
.featured-title {
color: black;
font-weight: bold;
font-size: 1.3em;
margin-top: -.4em;
display: block;
}
.featured-desc {
color: #3b3b3b;
margin-bottom: 3em;
font-size: .9em;
line-height: 1.8em;
font-weight: 500;
}
.skills {
background: #ff64cb;
}
.skills-container ul li {
background: white;
padding: 2em;
border-radius: 1em;
margin-bottom: 1em;
.icon-container {
height: 100px;
display: grid;
place-content: center;
margin: 0 auto;
&.one {
width: 50px;
}
&.two {
width: 100px;
}
&.three {
width: 60px;
}
}
.skill-title {
font-weight: bold;
}
.featured-desc {
margin-bottom: 2em;
}
}
.portfolio {
background: #f7f7f7;
}
.portfolio-container a img {
border-radius: 1em;
margin-bottom: 2em;
}
@media only screen and (min-width: 800px) {
.featured, .portfolio {
text-align: left;
}
.featured, .portfolio-container {
display: grid;
grid-template-columns: 40% auto;
}
.left, .portfolio-left {
display: grid;
place-content: center;
}
.right {
margin-left: 2em;
margin-top: 1em;
}
.skills {
margin-top: -5em;
margin-bottom: -7em;
padding-top: 7em;
}
.skills-container ul {
display: grid;
grid-template-columns: repeat(3, auto);
grid-gap: 1em;
}
.portfolio {
padding-top: 7em;
}
.portfolio-container img {
margin-left: 2em;
}
}
@media only screen and (min-width: 1050px) {
.hero {
height: 90vh;
}
.nav-container {
display: grid;
grid-template-columns: 66% auto;
background: unset;
header {
background: #6700ee;
}
}
header {
padding: 2em 2em 2em 4em;
}
.social-header {
padding: 2em 4em 2em 0;
}
section {
padding: 4em;
}
.social-header {
display: block;
ul {
display: flex;
justify-content: space-around;
width: 7em;
float: right;
img {
width: 20px;
}
}
}
.hero {
display: grid;
grid-template-columns: 66% auto;
background: unset;
padding: 0;
.content {
background: #6e00ff;
padding: 6em 8em 8em 4em;
text-align: left;
h1 {
font-size: 3em;
line-height: 1.2em;
}
}
}
.meet {
margin: unset;
}
.hero-design {
display: unset;
margin-left: -50%;
margin-top: 15%;
width: 100%;
}
.portfolio img {
float: right;
max-width: 500px;
}
}
@media only screen and (min-width: 1250px) {
header {
padding: 2em 2em 2em 10em;
}
.social-header {
padding: 2em 10em 2em 0;
}
section {
padding: 10em 10em 4em 10em;
}
.hero .content {
padding: 6em 8em 6em 10em;
}
}
@media only screen and (min-width: 1550px) {
header {
padding: 2em 2em 2em 20em;
}
.social-header {
padding: 2em 20em 2em 0;
}
section {
padding: 20em 10em 4em 20em;
}
.hero .content {
padding: 6em 8em 6em 20em;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My portfolio</title>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div class="nav-container">
<header>
<a href="index.html" class="logo">Isaiah Johnson</a>
<nav>
<ul>
<li><a href="">My Work</a></li>
<li><a href="">My Skills</a></li>
<li><a href="">Hire Me</a></li>
</ul>
</nav>
</header>
<div class="social-header">
<!-- MAKE SURE IMAGES ARE VISIBLE -->
<ul>
<li><a href=""><img src"images/dribble.png" alt="dribble"/></a></li>
<li><a href=""><img src"images/github.png" alt="github"/></a></li>
<li><a href=""><img src"C:\Users\dparr\OneDrive\Desktop\Web Dev\My Portfolio\images\facebook.png" alt="facebook"/></a></li>
</ul>
</div>
</div>
<div class="hero">
<div class="content">
<h1>YOUR FAVORITE WEB DESIGNER<br /> YOU HAVENT HIRED <br />YET</h1>
<div class="meet">
<span></span>
<p>Meet Isaiah Johnson</p>
</div>
<svg class="scroll" width="36" height="76" viewBox="0 0 36 76">
<g id="scroll" transform="translate(-186 -482)">
<g id="Rectangle_3" data-name="Rectangle 3" transform="translate(186 482)" fill="none" stroke="#fff" stroke-width="6">
<path d="M17.333,0H18A18,18,0,0,1,36,18V58A18,18,0,0,1,18,76h0A18,18,0,0,1,0,58V17.333A17.333,17.333,0,0,1,17.333,0Z" stroke="none"/>
<path d="M17.375,3H18A15,15,0,0,1,33,18V58A15,15,0,0,1,18,73h0A15,15,0,0,1,3,58V17.375A14.375,14.375,0,0,1,17.375,3Z" fill="none"/>
</g>
<g id="Rectangle_4" data-name="Rectangle 4" transform="translate(197 494)" fill="#fff" stroke="#707070" stroke-width="1">
<rect width="15" height="17" rx="7.5" stroke="none"/>
<rect x="0.5" y="0.5" width="14" height="16" rx="7" fill="none"/>
</g>
</g>
</svg>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="520" height="520" viewBox="0 0 520 520">
<g id="hero-image" transform="translate(-1006 -161)">
<rect id="Rectangle_5" data-name="Rectangle 5" width="130" height="130" rx="19" transform="translate(1266 161)" fill="#6e00ff"/>
<rect id="Rectangle_10" data-name="Rectangle 10" width="130" height="130" rx="19" transform="translate(1266 421)" fill="#6e00ff"/>
<rect id="Rectangle_7" data-name="Rectangle 7" width="130" height="130" rx="19" transform="translate(1396 291)" fill="#6e00ff" opacity="0.39"/>
<rect id="Rectangle_6" data-name="Rectangle 6" width="130" height="130" rx="19" transform="translate(1136 291)" fill="#fff"/>
<rect id="Rectangle_9" data-name="Rectangle 9" width="130" height="130" rx="19" transform="translate(1136 551)" fill="#fff"/>
<rect id="Rectangle_8" data-name="Rectangle 8" width="130" height="130" rx="19" transform="translate(1006 421)" fill="#fff" opacity="0.27"/>
<circle id="Ellipse_1" data-name="Ellipse 1" cx="64.5" cy="64.5" r="64.5" transform="translate(1266 291)" fill="#ff64cb"/>
<circle id="Ellipse_2" data-name="Ellipse 2" cx="64.5" cy="64.5" r="64.5" transform="translate(1136 422)" fill="#00f7ff"/>
</g>
</svg>
</div>
<!-- FEATURED PROJECT -->
<section class="featured">
<div class="left">
<div class="inner transition2">
<p class="subtitle">Featured Project</p>
<a href="" class="featured-title">DesignCourse.com ReDesign</a>
<p class="featured-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<img class="right transition2" src="images/designcourse.jpg" alt="Seductivebox">
</section>
<!-- SKILLS SECTION-->
<!-- UX DESIGN -->
<section class="skills">
<div class="skills-container">
<ul>
<li class="transition2">
<div class="icon-container one">
<img src="images/icons8-pointer-50.png" alt="UI/UX Icon">
</div>
<p class="skill-title">UI UX Design</p>
<p class="featured-desc skill-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</li>
<!-- FRONTEND DEVELOPMENT -->
<li class="transition2">
<div class="icon-container two">
<img src="images/frontend.svg" alt="frontend">
</div>
<p class="skill-title">Frontend Development</p>
<p class="featured-desc skill-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</li>
<!-- IDENTITY DESIGN -->
<li class="transition2">
<div class="icon-container three">
<img src="images/identity.svg" alt="identity">
</div>
<p class="skill-title">Identity Design</p>
<p class="featured-desc skill-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</li>
</ul>
</div>
</section>
<!-- PORTFOLIO SECTION -->
<!-- FIRST PROJECT -->
<section class="portfolio">
<div class="portfolio-container transition3">
<div class="portfolio-left">
<div class="inner">
<p class="subtitle">Lingerie Subscription Box</p>
<p class="featured-title">Seductivebox</p>
<p class="featured-desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, nam!</p>
</div>
</div>
<a href=""><img src="images/seductivebox.jpg" alt="seductivebox"> </a>
</div>
<!-- SECOND PROJECT -->
<div class="portfolio-container transition3">
<div class="portfolio-left">
<div class="inner">
<p class="subtitle">Dog Dating App</p>
<p class="featured-title">Tindog</p>
<p class="featured-desc">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Qui, velit.</p>
</div>
</div>
<a href=""><img src="images/seductivebox.jpg" alt="seductivebox"> </a>
</div>
<!-- THIRD PROJECT -->
<div class="portfolio-container transition3">
<div class="portfolio-left">
<div class="inner">
<p class="subtitle">Vanilla Coding</p>
<p class="featured-title">Virtual Keyboard</p>
<p class="featured-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, soluta!</p>
</div>
</div>
<a href=""><img src="images/seductivebox.jpg" alt="seductivebox"> </a>
</div>
</section>
</body>
</html>
您的 src 图片中缺少 = 标志。
<img src="images/dribble.png" alt="dribble"/>
而不是
<img src"images/dribble.png" alt="dribble"/>
您缺少一个 = 标志，那么您的代码就可以了。
<img src="..." alt="...">