3
respostas

[Dúvida] Imagem nao carrega e a extensao tambem nao funciuona ..

olá ao executar o código da aula com o debug do visual studio a foto nao carrega, tambem gostaria de alguma orientação quanto a extensão do live server. O código HTML:

Eleve seu negócio digital a outro nível com um Front-end de qualidade!

Olá sou Daniel dos Reis estudante de desenvolvimento de sistemas WEB, tambem sou estudante da ALURA, onde estudo JAVASCRIPT, HTML, CSS e banco de dados principalmente mogodb, com foco em aprender as tecnologias de desenvolviemnto WEB do ecossistema do NODEJS

Linkedin Github  Foto de perfil o código no vs code ja que o forum nao deixa que eu escreva meu código da aula sem executá-lo:

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

O resultado ao executar a extensão go live: Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas

Olá, Daniel! Espero que já tenha conseguido resolver, mas caso não tenha, vou tentar ajudar. A página exibida no live server contém informações diferentes da aba do arquivo html que você está editando no VSCode (primeira imagem). No VSCode você está com a aba aberta no arquivo portfolio3.html enquanto que a página que está tentando ser renderizada no Live Server tem o arquivo portfolio1.html e foto3.png.

O que aconteceu foi que você abriu sua pasta com o arquivo portfolio1.html e foto3.png no VsCode, em seguida abriu o arquivo portfolio3.html também no VSCode, mas ele está em uma pasta diferente da que contém portfolio1.html e foto3.png. Depois você executou o portfolio3.html e gerou essa página onde não carrega o arquivo, apenas exibi o que tem dentro dessa pasta (foto3.png e portfolio.html)

Feche o VScode e abra a pasta que contém os arquivos do seu projeto portfolio1.html e foto3.png. Clique no arquivo portolio1.html e em seguida clique na opção Go Live no canto inferior direito do seu VSCode. Caso ainda continue com o problema, traga mais informações, pois quanto mais detalhadas, melhor.

Em um print do VSCode mostre a aba Explorer para ver como estão organizado os seus arquivos. No meu explore tem o arquivo portolio3.html e foto3.png

No print do navegador, pegue imagem do endereço do diretório que o Live Code está tentando exibir. No meu está http://127.0.0.1:5500/porfolio3.html. imagem da tela do vscode e do navegador buscando exemplificar o erro

Veja que consegui executar tudo direitinho. Espero que consiga também. Abraço.

Reproduzindo o erro cometido.

Abri a pasta Portfolio3 (ver diretório explorer do meu vscode) contendo os arquivo portfolio1.html e foto3.png. Em seguida abri um outro arquivo html externo (portfolio3.html) na mesma aba do VScode. Executei o portfolio3.html no live server e ele renderizou a pasta Portfolio3. O Live Server renderiza os arquivos da sua pasta e ele espera que dentro desta pasta esteja o arquivo html que você está tentando acessar. Como não está, ele acaba apenas exibindo o diretório com os arquivos dentro. print da tela do Vscode para exemplificar erro de renderização Live Serve

Entao estava meio bagunçado meu folder porque criei tres arquivos, mas quando apaguei os antigos renderizou normalmente, o VS code deve ter confundido os arquivos, lido os antigos ao invés dos que eu estou usando atualmente, muito obrigado pela ajuda !