title: Brackets image live preview
body: <p>So I'm at a loss here.  I know I have the proper src code for my image,  when I view the page in Chrome, without the use of Brackets, the image will show.  But when I use Brackets Live preview, it does not show the image in the browser, it does create a box for it, but its empty.  The funny thing is, when I hover over the code in the text editor in Brackets, I get a preview of the image.  Any help will be greatly appreciated!</p>
  
  <pre><code>    &lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
      &lt;link rel="stylesheet" href="css/normalize.css"&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt;
      &lt;link href='https://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'&gt;
          &lt;link href='https://fonts.googleapis.com/css?family=Libre+Baskerville' rel='stylesheet' type='text/css'&gt;
      &lt;title&gt;Here goes #1&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;header class="main-header"&gt;
                  &lt;ul class="nav bv"&gt;
                      &lt;li&gt;&lt;h1&gt;My Favortie Artists&lt;/h1&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Podcasts&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Books&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Ideas&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
          &lt;/header&gt;
  
              &lt;div class="main-content"&gt;
                  &lt;div class="content1"&gt;
                      &lt;ul clas="imgs"&gt;
                          &lt;li class="afr"&gt;&lt;a href="afr.html"&gt;&lt;img src="c:web projects/art/img/afr1.jpg"&gt;Afremov&lt;/a&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;
                      &lt;p&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  
  
   * {
      margin: 0;
      padding; 0;
      box-sizing: border-box;
      width: 100%;
  }
  
  body li {
      list-style-type: none;
  }
  
  ul {
      padding: 0;
  }
  
  .nav {
      text-align: center;
      background-color: beige;
      box-shadow: 0 1px 10px black;
      height: 230px;
  }
  
  .nav h1 {
      text-shadow: 5px 7px 4px white, 2px 2px 10px beige;
      line-height: .8em;
      padding: 10px 0;
  
  }
  
  /*COMMON FONTS*/
  
  .bv {
      font-family: 'Bevan', cursive;
  }
  
  /*SMALL SCREEN STYLE*/
  .nav li {
      font-size: 1.25em;
      text-shadow: 2px 3px 10px white;
  }
  
  
  /*LINK STYLES*/
  .nav a {
      text-decoration: none;
      list-style-type: none;
      border-bottom: 2px solid grey;
      padding: 0 15px;
      color: black;
      border-radius: 10%;
  }
  
  .nav a:hover {
      background-color: bisque;
      padding: 0 5%;
      font-size: 1.5em;
      border-radius: 25%;
      transition: background-color .6s,  padding .8s; font-size 3s, border-radius .8s;
  }
  
  /*LARGE SCREEN*/
  @media (min-width: 769px) {
      .nav {
          display: flex;
          height: 150px;
      }
      .nav li {
          flex-grow: 1;
          align-self: center;
  }
  
      .nav:not(:first-child) {
          flex-flow: wrap;
          justify-content: flex-end;
      }
      .nav h1 {
          padding-right: 50%;
          flex-grow: 2;
          margin-left: 10px;
      }
      .nav a:hover {
      background-color: bisque;
      padding: 0 20%;
      font-size: 1.5em;
      border-radius: 25%;
      transition: all 1s;
  }
  
  /*Image Links*/
  </code></pre>