Meu código não funciona

[alissondias99]

Esse mini projeto deveria exibir um imagem quando o usuário clicar em cima de sua miniatura, porém nem os imagens nem as miniaturas estão aparecendo. Na aba dev tools está mostrando o erro net::ERR_FILE_NOT_FOUND.

<title>Image gallery</title>

<style>
   h1 {
    font-family: helvetica, arial, sans-serif;
    text-align: center;
  }
  
  body {
    width: 640px;
    margin: 0 auto;
  }
  
  .full-img {
    position: relative;
    display: block;
    width: 640px;
    height: 480px;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 640px;
    height: 480px;
    background-color: rgba(0,0,0,0);
  }
  
  button {
    border: 0;
    background: rgba(150,150,150,0.6);
    text-shadow: 1px 1px 1px white;
    border: 1px solid #999;
    position: absolute;
    cursor: pointer;
    top: 2px;
    left: 2px;
  }
  
  .thumb-bar img {
    display: block;
    width: 20%;
    float: left;
    cursor: pointer;
  }
</style>

Image gallery example

<div class="full-img">
  <img class="displayed-img" src="images/pic1.jpg">
  <div class="overlay"></div>
  <button class="dark">Darken</button>
</div>

<div class="thumb-bar">


</div>
<script>
    const displayedImage = document.querySelector('.displayed-img');
    const thumbBar = document.querySelector('.thumb-bar');
    
    const btn = document.querySelector('button');
    const overlay = document.querySelector('.overlay');
    
    const images = ['pic1.jpg', `pic2.jpg`, `pic3.jpg`, `pic4.jpg`, `pic5.jpg`];
    
    for (const image of images) {
      const newImage = document.createElement('img');
      newImage.setAttribute('src', `images/${image}`);
      thumbBar.appendChild(newImage);
      newImage.addEventListener('click', e => displayedImage.src = e.target.src);
    }
    
    btn.addEventListener('click', () => {
      const btnClass = btn.getAttribute('class');
      if (btnClass === 'dark') {
        btn.setAttribute('class','light');
        btn.textContent = 'Lighten';
        overlay.style.backgroundColor = 'rgba(0,0,0,0.5)';
      } else {
        btn.setAttribute('class','dark');
        btn.textContent = 'Darken';
        overlay.style.backgroundColor = 'rgba(0,0,0,0)';
      }
    });

</script>

[caioagiani]

[alissondias99]

Mas isso eu já fiz.

HTML:

Darken

JS:
for (const image of images) {
const newImage = document.createElement('img');
newImage.setAttribute('src', images/${image});
thumbBar.appendChild(newImage);
newImage.addEventListener('click', e => displayedImage.src = e.target.src);
}

Isso foi retirado do meu código, só copiei e colei, o problema é que por algum motivo as imagens não estão sendo encontradas. O único erro que o browser informa é "NOT FOUND".
Mas obrigado mesmo assim.

[alissondias99]

Como eu não sei usar o GitHub direito ainda, quando eu escrevo a parte do HTML da algum erro e só aparece um imagem que leva a lugar nenhum, por isso vou postar uns prints.

Eu realmente não tenho ideia do porque está dando esse erro.

[theandersonn]

Testei por aqui e as imagens aparecem.

Segue, teste esse aqui.
example-github.zip

[alissondias99]

Muito obrigado, comparando seu código e o meu lado a lado consegui perceber meu erro, foram uns erros de digitação idiotas, tenho até vergonha, mas pelo menos consegui entender o erro, vlw de novo.

[theandersonn]

Imagina, super normal de acontecer, faz parte do nosso dia a dia.
Bons estudos!
E parabéns por estar aplicando.