all of my pictures in my html/css project dont appear-CodePudding

i am currently working on my first solo html/css project on vscode, but i dont know why all the images dont appear including my background image. i have searched a lot to find a solution for that but i found nothing helpful. i really dont know if the problem is from the code, from the text editor or from the pictures themselves.

body{
    margin-top: 0px;
    padding-top: 0px;
    background-image: url("avengers_bg.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

#eternals_pic{
    float: left;
}

#hawkeye_pic{
    float: left;
}

#spiderman_pic{
    float: left;
}

#strange_pic{
    float: left;
}



 <!DOCTYPE html>

    <html>
    <body>
        <a href="https://phantom- 
marca.unidadeditorial.es/927e619e34b67b9e7326c9266914e6f0/crop/68x0/1311x700/resize/1320/f/jpg/assets/multimedia/imagenes/2021/08/20/16294695683527.jpg">
                    <img id="eternals_pic" src="eternals.png" width="400px" alt="The Eternals" title="The Eternals">
                </a>
<a href="https://static2.cbrimages.com/wordpress/wp-content/uploads/2021/07/hawkeye-header-2.jpg">
                    <img id="hawkeye_pic" src="hawkeye.jpeg" width="400px" alt="Hawkeye" title="Hawkeye">
                </a>
<a href="https://wttspod.com/wp-content/uploads/2021/07/maxresdefault-8.jpg">
                    <img id="spiderman_pic" src="spiderman_nwh.jpeg" width="400px" alt="Spiderman NWH" title="Spiderman NWH">
                </a>
<a href="https://upload.wikimedia.org/wikipedia/commons/1/11/Doctor_Strange_2_(cropped).jpg">
                    <img id="strange_pic" src="strange2.jpeg" alt="Dr.Strange 2" title="Dr.Strange 2" >
                </a>
    </body>

CodePudding user response：

The size attributes of an image have to be set without an unit. By default it is pixels so replace width="400px" by width="400".

Ideally, you should also set the height attribute of your image. This will help the browser display an empty rectangle before the image is actually downloaded.

It is then possible to override the image size with CSS rules such as this one that will make your image smaller if you reduce the size of the page, but keeping the correct image ratio:

img {
  max-width: 100%;
  height: auto;
}

Also, it’s a good practice to put your images inside a folder such as images or img so that you don’t have HTML files next to CSS, JS and image files. Then in the src attribute, you put the relative path to your image, such as src="img/cloud.png".

Use your browser debugger to see if you get an error while downloading the image. It may also be the wrong extension, such as a bitmap (BMP) file renamed in PNG or JPG. I saw many errors like that where the browser didn’t display the image but other softwares did, even without noticing you that the file extension is wrong.

Another check: remove your CSS rules and see if your content shows up just with plain HTML without design. If it still doesn’t then you know it’s not due to a rendering problem but due to either an error in your HTML, missing files, wrong paths, broken images, etc.

Last idea: are you serving the HTML through a web server? I mean Apache, NGINX, or a any PHP built-in HTTP server. If yes, you could have some rewrite rules or other things modifying the way URLs are handled.

CodePudding user response：

As far as I understood you do not have any images in your local environment and you are trying to get the images using their live urls. Try to change your html code like this:

<a href="https://phantom- 
marca.unidadeditorial.es/927e619e34b67b9e7326c9266914e6f0/crop/68x0/1311x700/resize/1320/f/jpg/assets/multimedia/imagenes/2021/08/20/16294695683527.jpg"
     <img id="eternals_pic" src="https://phantom- 
marca.unidadeditorial.es/927e619e34b67b9e7326c9266914e6f0/crop/68x0/1311x700/resize/1320/f/jpg/assets/multimedia/imagenes/2021/08/20/16294695683527.jpg" width="400px" alt="The Eternals" title="The Eternals">
</a>

If the above code is what you want to achieve then the problem is either you should spend a bit more time to understand the concepts or you do not have any image called eternals.png in the directory that your html file lives.