Design comparison
Solution retrospective
For some reason the images are not showing and I have tried every reason I know. Please help me out.
Community feedback
- @Lakshmi-sathPosted about 2 years ago
Hi , What others said may be the case or you might have forgot to upload the image files into github...
Marked as helpful0 - @correlucasPosted about 2 years ago
👾Hello stepheigbe, congratulations for your new solution! Your image is not displaying due the fact you didnt wrote the correct path for the images, here's how you can fix it:
Here's the correct import for the image:
<img id="perfume" src="./images/image-product-desktop.jpg" alt="perfume">
Remember, when the image is inside the repository folder use dot slash
./
and if is inside a subfolder use dot dot slash../
If the image is the same folder of the html without folder just add normal path.👋 I hope this helps you and happy coding!
Marked as helpful0 - @gabcchavesPosted about 2 years ago
Hi, stepheigbe. The reason the image is not displayed is because you did not specify its correct path, which is "images/image-product-desktop.jpg". Besides that, I would suggest that you used a div or article tag to be the card. Also, the body could have flex display, with both centered justify-content and align-items properties.
You may take a look at my code, though it has some flaws, which I got to fix soon. (I moved on to other projects): https://github.com/gabcchaves/product-preview-card-component-main
Marked as helpful0@stepheigbePosted about 2 years ago@gabcchaves I legit just realised it on my own when another project of mine worked but thank you soo much
0 - @freakyjonesPosted about 2 years ago
Hi stepheigbe
congrats on completing the challenge .
- If your current src for the Image is
\media\product.jpg
change it to./media/product.jpg
hopefully it will work. - For the second Image change the src to
./media/iconcart.svg
Thanks, Happy coding :)
Marked as helpful0 - If your current src for the Image is
- @gulamansari57181Posted about 2 years ago
Hey buddy. I have seen your query and you must have been so frustrated. hahahah !!!! here is a solution to your problem
Solution: in <img> tag you had written "src="\media\product.jpg" The issue is you have used backward slash "" . You should use forward slash "/" in your absolute path.
conclusion: <img id= "img" src="media/product.jpg"> see the magic.
Happy Coding !!! Do Upvote if you feel it helping.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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