Search code examples
htmlimagepathrelative-pathsrc

Images not showing up regardless of path


I just launched a very simple site with 5 images. 4 of the images do not show up regardless of the path in the img tag. The 5th image always shows up regardless of the path in the img tag.

I have tried "images/imagename.jpg", "/images.imagename.jpg", "../images.imagename.jpg". I have tried putting images in root and using src="imagename.jpg".

The images that don't show up have this warning in the console: enter image description here

Here is the current code: http://avalynncirce.com/perduco

<!DOCTYPE html>
<html>
    <head>
        <style>
            img {max-height: 100vh;}
        </style>
    </head>
    <body>

        <div style="width:20%; float:left; position: fixed;">
            <nav>
                <ul>
                    <li><a href="#sv1">Workflow v1 Scatterplot</a></li>
                    <li><a href="#mv1">Workflow v1 Menu</a></li>
                    <li><a href="#sv2">Workflow v2 Scatterplot</a></li>
                    <li><a href="#mt">Collaboration Tool: Sketch (MAC and Online)</a></li>
                    <li><a href="#mt2">Collaboration Tool Tool: Figma (Windows)</a></li>
                </ul>
            </nav>
        </div>

        <div style="width:75%; float:right;">
            <section id="sv1">
                <hr style="margin: 50px;">
                <img src="/images/scatterplotv1.png">
            </section>

            <section id="mv1">
                <hr style="margin: 50px;">
                <img src="../images/menuv1.png">
            </section>

            <section id="sv2">
                <hr style="margin: 50px;">
                <img src="../images/perduco.png">
            </section>

            <section id="mt">
                    <hr style="margin: 50px;">
                    <img src="../images/perduco-sketch.png">
            </section>

            <section id="mt2">
                    <hr style="margin: 50px;">
                    <img src="../images/figma.png">
            </section>

        </div>

    </body>
</html>

Solution

  • This has never occurred before and I'm not sure why it occurred this time, but the image files in question were set to private. I use Filezilla for uploading files. A right-click on the server image brought up a menu where I could change the privacy settings.

    enter image description here