HTML Code Image link is broken

My following code is for a project that is on codeacadamy. My image links are showing up as broken when I pull it up for any internet browser. It does lead to that right directory as I can ctrl + click on that code and it takes me to the right image.



<!DOCTYPE html>
<html>
    <link rel="stylesheet" type="text/css" href="resources/index.css">
    <Head>
        <title>
            Dasmoto's Arts & Crafts
        </title>
    </Head>
    <body>
        <div class=header>
        <h1>
            Dasmoto's Arts & Crafts
        </h1>
        </div>
        <div class=brushes>
        <h1>
            Brushes
        </h1>
        <img src="/resources/hacksaw.jpeg"  alt="Hacksaw Brushes" style="width:250px; height:250;">
        <h3>
            Hacksaw Brushes
        </h3>
        <p>
            Made of the quality oak, Hacksaw bruches are know for their weight and ability to hold paint in large amounts. Avaliable in different sizes. <em>Starting at $3.00 / brush.</em>
        </p>
        </div>
        <div class=frames>
        <h1>
            Frames
        </h1>
        <h3>Art Frames (assorted)</h3>
        <p>
            Assorted frames made of different material, including MDF, birchwood and PDE. Select frames can be sanded and painted according to your needs.<em> Starting at $2.00 / frame.</em>
        </p>
        </div>
        <div class=paint>
        <h1>
            Paint
        </h1>
        <h4>
            Clean Finnish Paint
        </h4>
        <p>
            Imported paint from Finland. Over 256 colors avaliable in-store, varying in quantity(1 oz. to 8 oz.). Clean finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.<em> Starting at $5.00 a tube.</em> 
        </p>
        </div>

    </body>
</html>

Hi,

The images are hosted on Codecademy’s server, the way the images are currently linked is relative as its in the same folder as the HTML & CSS that you are typing in CC’s Environment.

When you want to take your code out of that environment you will either need to download those images to make it match the file path on your computer or you will need to specify an external URL, example: https://aws1.discourse-cdn.com/codecademy/original/5X/b/d/f/0/bdf01ae028fd1a1b5db8f8d15df6c6fa7889ba95.png

*ps: when it comes to downloading and using other images you will have to be aware of copyright.

Not related to your question but I noticed that you are missing quotes around your class names, the format should be: class="className"

1 Like