1
resposta

[Dúvida] meu jogo abre no ópera e nbão no google, e a imagem não aparece

Quando abro o HTML com o live server ele abre no ópera e não no google, daí a imagem não aparece mesmo o meu código estando igual o do professor.

Meu código:

let numeroSecreto = 5;

function exibirTextoNaTela(tag, texto){ let campo = document.querySelector(tag); campo.innerHTML = texto; }

exibirTextoNaTela('h1', 'Jogo do número secreto'); exibirTextoNaTela('p', 'Escolha um número entre 1 e 10');

Meu index:

<div class="container">
    <div class="container__conteudo">
        <div class="container__informacoes">
            <div class="container__texto">
                <h1>Adivinhe o <span class="container__texto-azul">numero secreto</span></h1>
                <p class="texto__paragrafo">Escolha um número entre 1 a 10</p>
            </div>
            <input type="number" min="1" max="10" class="container__input">
            <div class="chute container__botoes">
                <button onclick="verificarChute()" class="container__botao">Chutar</button>
                <button onclick="" id="reiniciar" class="container__botao" disabled>Novo jogo</button>
            </div>
        </div>
        <img src="./img/ia.png" alt="Uma pessoa olhando para a esquerda" class="container__imagem-pessoa" />
    </div>
</div>




<script src="app.js" defer></script>

function verificaChute(){ let chute = document.querySelector('input').value;

if(chute == numeroSecreto) { exibirTextoNaTela('h1', 'Acertou!') exibirTextoNaTela('p', 'Você descobriu o número secreto!') } }

function gerarNumeroAleatorio(){ return parseInt(Math.random() * 10 + 1); }

1 resposta

Olá, Vitor.

Tudo bem?

Entendo que você está enfrentando dois problemas: o primeiro é que o Live Server abre seu projeto no Opera em vez do Google Chrome, e o segundo é que a imagem não aparece.

1. Live Server abrindo no Opera

Para que o Live Server abra seu projeto no Google Chrome, você pode configurar isso diretamente nas configurações do Visual Studio Code. Siga estes passos:

  1. Abra as Configurações do VS Code:

    • Vá para File (ou Arquivo) > Preferences (ou Preferências) > Settings (ou Configurações).
  2. Procure por "Live Server Settings":

    • Na barra de pesquisa das configurações, digite "Live Server Settings".
  3. Configurar o Navegador Padrão:

    • Encontre a opção Live Server › Settings: Custom Browser e selecione Chrome na lista.

2. Imagem não aparecendo

Para resolver o problema da imagem que não aparece, verifique os seguintes pontos:

  1. Caminho da Imagem:

    • Certifique-se de que o caminho da imagem está correto. No seu código, você está usando src="./img/ia.png". Verifique se a imagem ia.png está realmente dentro da pasta img no mesmo diretório do seu arquivo HTML.
  2. Nomes de Arquivos e Extensões:

    • Verifique se o nome do arquivo e a extensão estão corretos. Por exemplo, se a extensão for .jpg em vez de .png, a imagem não será carregada.
  3. Erros no Console:

    • Abra o console do navegador (pressione F12 ou Ctrl+Shift+I e vá para a aba Console) e veja se há algum erro relacionado ao carregamento da imagem.

Exemplo Prático

Suponha que seu projeto tenha a seguinte estrutura de pastas:

/projeto
  /img
    ia.png
  index.html
  app.js
  style.css

Com essa estrutura, o caminho src="./img/ia.png" deve funcionar corretamente.

Verificação Final

Depois de ajustar essas configurações, abra novamente seu projeto no Google Chrome usando o Live Server e veja se a imagem aparece corretamente.

Espero ter ajudado e bons estudos!