Image is not displaying on the webpage … is there a fix?

help
1

CSS code

.card {

box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);

border-radius: 5px; 

transition: 0.3s;

width: 40%;

margin: 2%;

display: inline-block;

}

.card:hover {

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

}

.container {

padding: 2px 16px;

}

img {

border-radius: 5px 5px 0 0;

}

main.html

<img src="..//Icons//metacafe.png" alt="METACAFE" style="width:100%">

<div class="container">

  <h4><b>METACAFE</b></h4>

</div>

<img src="..//Icons//sony_crackle.jpg" alt="CRACKLE" style="width:100%">

<div class="container">

  <h4><b>CRACKLE</b></h4>

</div>

<img src="..//Icons//youtube.png" alt="YOUTUBE" style="width:100%">

<div class="container">

  <h4><b>YOUTUBE</b></h4>

</div>

<img src="..//Icons//vimeo.png" alt="VIMEO" style="width:100%">

<div class="container">

  <h4><b>VIMEO</b></h4>

</div>

<img src="..//Icons//twitch.jpg" alt="TWITCH" style="width:100%">

<div class="container">

  <h4><b>TWITCH</b></h4>

</div>

<img src="../setting.png" alt="SETTINGS" style="width:100%">

<div class="container">

  <h4><b>SETTINGS</b></h4>

</div>

error
error1907×855 29.3 KB

2

The problem is the paths in your img src props.

I never tried to do anything in main.html except set some meta tags and there is probably no good reason why you should do that.
main.html should just contain the head with title and meta tags and maybe some style and script tags (if you need to load them via CDNns instead of importing node modules) and the body with a div that serves as a render-target for your js framework (like react or vue).

So not 100% sure how the paths are resolved. But they should probably look like this (assuming you got the images in [root of the repo]/public/icons): “/icons/twitch.jpg”

The double slash after Icons is definately wrong.

But I would suggest you pick a js framework, do all your templating there and leave main.html pretty much alone.

1 Like
3

thanks, I needed to add public in the main folder, which fix the problem.