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_
error_1907×855 29.3 KB

2

where are images stored?

3

I already fixed it, I figured out I needed to place the images in a folder called public in the main directory.