Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Cartão de visita com tecnicas css e html para melhor expansividade

@claudius281930

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


O github Live Pages não carregou a imagem. Não sei porque.

Community feedback

CODE STEAL 680

@leandrorodrigues00

Posted

Good Afternoon Claudio!

Your site did not load the image because you did not put a dot in the src of the image tag.

It looks like this: <img src="/assets/image-product-desktop.jpg" >

It should be like this: <img src="./assets/image-product-desktop.jpg" >

Without the dot before the slash, you tell the browser that the image is in the root of the project, so it will fetch the image from:

https://claudius281930.github.io/assets/image-product-desktop.jpg

With the "./", it fetches the image from the parent folder, so it loads;

https://claudius281930.github.io/CartaodeVisita_do_produto/assets/image-product-desktop.jpg

a short summary:

/ means the root of the current drive;

./ means the current directory;

../ means the parent of the current directory;

So if you run the project on your machine, the images will load, but when you publish to GitHub Pages that works with Jekyll, it will break the images!

Have a nice day, happy coding !! :)

Marked as helpful

0

@claudius281930

Posted

@leandrorodrigues00 Olá, amigo. Muito obrigado pela ajuda. Sim verdade. Fui lá na pagina do GitHub editei o arquivo lá mesmo. Espero que funcione. Boa noite e muito obrigado!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord