Personal Portfolio webpage: I cannot load a screenshot in HTML

HTML-CSS
1

I uploaded my screenshot to Imgur and GitHub, copied the link, and inserted <img src=""> , but the image did not display. I tried regular photos from the browser and Imgur, and they display fine. Am I doing something wrong?

2

Please can you post your code so we can have a look.

Here is how to post code in the forum

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3 
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Prortfolio</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
  </head>
  <body>
    <header>
      <nav id="navbar">
        <ul>
          <a href="#welcome-section"><li>About</li></a>
          <a href="#projects"><li>Projects</li></a>
          <a href=""><li>Contact</li></a>
        </ul>
      </nav>
    </header>
    <main>
      <section id="welcome-section">
        <div class="name">
          <h1>Adicvat</h1>
          <p><i>a web developer</i></p>
        </div>
      </section>
      <section id="projects">
        <div class="box">
          <img src="https://github.com/Adicvat/proba/blob/main/proba.png" alt="tribute page">
        </div>
      </section>
    </main>
  </body>
</html>

:root {
  --header: #4B5CD7;
  --header-text: white;
  --welcome-page: #17112A;
}
* {
  box-sizing: border-box;
  border: 1px solid;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}
header {
  height: 60px;
  position: fixed;
  width: 100vw;
  background-color: var(--header);
  box-shadow: 0 3px 4px;
  z-index: 3;
}
#navbar ul {
  display: flex;
  justify-content: center;
  list-style: none;
  height: 100%;
}
#navbar {
  width: 50vw;
  float: right;
}
#navbar ul li {
  color: var(--header-text);
  font-size: 1.2em;
  font-weight: bold;
  height: 100%;
  padding: 0 20px;
  display: flex;
  place-items: center; 
}
a {
  text-decoration: none;
}
#navbar ul a li:hover {
  color: var(--header);
  background-color: var(--header-text);
  transition: all 0.3s ease-in-out;
}
#welcome-section {
  position: relative;
  top: 60px;
  width: 100%;
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--welcome-page);
  text-align: center;
}
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.name h1 {
  font-size: 4em;
  color: white;
}
.name p {
  font-size: 3em;
  color: var(--header);
}
.projects {
  position: relative;
  top: 760px;
}
.box {
  width: 250px;
  height: 250px;
}

I just don’t get how to put my own pictures to the Personal Portfolio webpage project like in example

4

Did you put the images in GitHub Pages?

5

I added an image to the repository. I just started learning GitHub and might be doing something wrong.

6

Adding the file to a repo is not enough to make the image “servable” online.

You will need to make the repo public and then set up the GitHub Pages to serve the repo so you can link to the image files.

7

Is there a simpler way to insert my screenshots into the code?

1 Like
8

What I often do is use an image hosting service. You can upload your images from your computer and they will host it for you and give you the url for it. Here’s a few of them:

If you’re still determined to attempt GitHub for the job, @hbar1st is correct, of course, but I would like to add with a short explanation of html file paths. You see, when you place your images in a folder in your GitHub repo, it may be in a different folder than your webpage. So you need to tell the browser how to find the image. Here’s roughly how:

https://example.com/folder/name-of-image

Of course, there can be folders nested within folders too, in which case you just keep adding the slashes and names of folders, in order.

Here’ an article if you’re interested:

Happy coding!

1 Like
9

It works, thank you.

1 Like
10

What did you end up doing differently?

11

Well, as you said, I need to set up GitHub Pages so that my screenshot is displayed if I use GitHub. Instead, I tried a hosting service and it works.

12

ah okay. Github pages is actually pretty easy to use but an image hosting service is probably faster in the long run.

2 Likes