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

Results-summary-compo

amaar09 240

@amaar09

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


The Image is not visible in the Live-site. In my PC it was visible. I don't understand the problem. Can someone please explain it to me

Community feedback

P
Lo-Deck 2,020

@Lo-Deck

Posted

Hi, well done for this challenge.

I've tried your Website and for the image I just wrote this : <img src="./assets/images/icon-reaction.svg"> or <img src="assets/images/icon-memory.svg"> instead of <img src="/assets/images/icon-memory.svg">.

Do you see the point at the beginning or with no slash, try this and I think it will be working afterward.

Marked as helpful

0

@helenclx

Posted

Hi, the images are not visible in your live site because in your HTML, you set the images' relative paths as /, which represents the root directory, meaning when you deployed your files, the deployed site is trying to look for images located at https://amaar09.github.io/assets/images/icon-reaction.svg, ignoring your Results-summary-component folder.

On the other hand, the images were visible in your PC might be because Results-summary-component is a root folder in your PC.

To solve this issue, try changing the paths of your images to ./, by adding a dot before the slash, which represents current working directory, for example ./assets/images/icon-memory.svg. This should make your deployed site look for the image files in your Results-summary-component folder.

You can read more about HTML file paths here: HTML File Paths

Marked as helpful

0

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