Adding A fallback Image {HTML&CSS}

I created a text app on Atom text editor using pure HTML&CSS. I imported all the required Images&Icons from a folder that I created within the editor named "images". {i did not use the "URL" "HTTPS" src to direct towards images.)

Now, when I publish my work on CodePen it shows the "unknown image" icon BCS I am unable to add my "image" folder there.

Since I can't add my folder in CodePen, the question of which the answer I require is:

How can I add a fallback image src, a "URL or HTTPS" in my code??

Here is my code {directrion of images} :

 <header>
      <nav>
        <ul class = "nav_links">
          <!-- <li><a class = "link_1" href : '#'>Home</li></a>  -->
           <!-- <li><a class = "link_2" href : '#'>Home</li></a> -->
           <!-- <li><a class = "link_3" href : '#'></li></a>  -->
          <li> <a class ="back-button" href = "#"> < </a> </li>
          <li> <img class = "dp" src = "images\pew.jpg"> </li>
          <li> <a class = "username" href="images/wp6890841.png">LunaticXXD_10</a></li>
          <li><img class="more-button" src ="images\more.png"></a></li>
          <li> <a class= "call-button" href ="#"><img class = "call-me" src = "images\whitecall.png"></a></li>
          <li> <button class = "block-contact" type = "submit">Block Contact</button></li>
        </ul>
      </nav>
    </header>