Images Aren’t Showing Up

The images in the corner aren’t showing up on any other page besides index.html
Repl link:

<!DOCTYPE html>
	<link rel="stylesheet" href="style.css">
  <title>SaladScript Doc</title>

	<div class="main-body">
		<nav id="navbar">
      <img class="img" src="Salad.png" alt="SaladScriptLogo.png" width="50em" height="50em">
			<header>SaladScript Doc <span class="badge-square">v 1.0.0</span></header>
			<a href="/index.html" class="nav-link">
				What is SaladScript</a>
      <a href="/HTMLPages/Setup.html" class="nav-link">
      <a href="/HTMLPages/Display.html" class="nav-link">
      <a href="/HTMLPages/Insert.html" class="nav-link">
      <a href="/HTMLPages/If.html" class="nav-link">
        If Statements</a>
      <a href="/HTMLPages/Loop.html" class="nav-link">
      <a href="/HTMLPages/Func.html" class="nav-link">
      <a href="/HTMLPages/Var.html" class="nav-link">
      <a href="/HTMLPages/List.html">
      <a href="/HTMLPages/Rest.html">

		<main id="main-doc">
      <section class="main-section" id="Display">
          Display is the way you print out a string statement.
          display("Hello World!")

html {
  width: 100%;
  height: 100%;
  font-family: Arial;
  animation: moveUp 1s;

@keyframes moveUp {
  0% { opacity: 0; transform: translateY(5em); }
  100% { opacity: 1; transform: translateY(0em); }
.img {
  border-radius: 25%;


.header {
  transform: translate(2.5em,-2em);
  padding-right: 10em;
div.main-body {
	display: grid;
	grid-template-columns: minmax(300px, auto)1fr;
	grid-template-areas: "navbar mainContent";
	grid-gap: 20px;

nav#navbar {
	grid-area: navbar;
	position: fixed;

nav#navbar a {
	display: block;
	border: 1px solid black;
	padding: 5px;
	margin: 10px 0;
	text-decoration: none;
	color: black;
  border-radius: 0.5em;

main#main-doc {
  border-radius: 0.5em;
  background-color: #eeeeee;
  padding: 2em;
	grid-area: mainContent;

header {
	font-size: 1.5rem;
	font-weight: bold;

code {
  margin-top: -1em;
  border-radius: 0.5em;
	background-color: #CCC;
	display: block;
	padding: 20px;

.badge-square {
  font-size: 0.5em;
  display: inline-block;
  padding: 0.125em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  background-color: blue;
  border-style: solid;
  border-radius: 0.5em;
  border-color: blue;
  border-width: 0.25em;
  color: white;
  width: max-content;
  text-align: center;


It’s because the path to your image is relative not absolute. You did Salad.png instead of /Salad.png If you go into the rendered page, it thinks that you’re trying to fetch the image from HTMLPages/Salad.png

@CadenChau now the text isn’t in the right placement. For reference the index.html file is correct.

wrap the text and image in a div and center them both

<div style="display: flex; align-items: center">
1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.