after upgrade, Some images are not showing in design view in but they show in remote view

Copy & paste the code below into a new, blank document. 

Can you see the images in Live view?

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertically Centered with CSS Flexbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
/** font size grows 1px for every 100px of viewport width **/
font-size: calc(16px + 1vw);
/** line-height grows with font size **/
line-height: calc(1.1em + 0.5vw);
background: url(https://placeimg.com/1200/1200/nature) center center fixed;
background-size: cover;
}
main {
background: rgba(0, 0, 0, 0.60);
width: 60%;
color: #EAEAEA;
padding: 10%;
text-align: center;
}
nav {
position: fixed;
top: 0;
width: 100%;
text-align: center;
background: black;
}
nav a {
color: lightgoldenrodyellow;
text-decoration: none;
padding: 3%;
font-size: 1.15rem;
}
nav a:hover, nav a:active, nav a:focus, nav .active {
color: indianred;
text-decoration: underline;
}
</style>
</head>
<body>
<nav>
<a class="active" href="index.html">HOME</a>
<a href="about.html">ABOUT</a>
<a href="gallery.html">GALLERY</a>
<a href="contact.html">CONTACT</a>
</nav>
<main>
<h3>Welcome to CSS Flexbox</h3>
<p>This is horizontally and vertically centered.</p>
<img src="https://dummyimage.com/400x300" alt="placeholder"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error assumenda porro doloremque temporibus quo dolorum soluta, minima in ad non officiis, totam ab vitae id accusamus iste consequatur, nesciunt maiores.</p>
</main>
</body>
</html>