Question
Broken Image Icons in Design Mode
All of my images are appearing with a broken image icon in design mode:

Everything is showing up and functioning perfectly in live mode and in my browser. Below is my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Border Collie Rescue</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1>Border Collie Rescue</h1>
<h2>Your help can make a difference!</h2>
<hr>
<hr>
</header>
<main>
<p><img src="images/main-photo.jpg" alt="Collies" width="600" height="200"></p>
<p>
If you're looking for an energetic, fun loving dog to adopt, or you want to relinquish a dog, this is your point of contact. The Border Collie Rescue Association is dedicated to finding homes for Border Collies, who, by no fault of their own, find themselves without a family to care for them.
</p>
<h2>Featured Border Collies of the Week</h2>
<p><img src="images/featured-dogs.jpg" alt="Featured Dogs" width="500" height="240" usemap="#Map" title="featured-dogs-image-map">
<map name="Map">
<area shape="rect" coords="15,1,161,237" href="hope.html" alt="Hope">
<area shape="rect" coords="178,2,322,236" href="blaze.html" alt="Blaze">
<area shape="rect" coords="340,3,482,237" href="screwball.html" alt="Screwball">
</map>
</p>
<p>
Please take a look at our featured Border Collies of the Week. They would all be wonderful additions to the right home. As always, Border Collies are very intelligent, active animals and need to task to stay happy and out of trouble. Click on the image for more information.
</p>
</main>
</div> <!--closes wrapper-->
</body>
</html>
What's causing this? I can't seem to find a solution online, just people saying that design mode in Dreamweaver is unreliable. Surely a problem this simple has a fix.
