Edge displaying .jpg image as randomly colored square

Edge displaying .jpg image as randomly colored square

I have a problem that has just recently occurred, it may be a browser bug in Edge as I am sure it was working previously, but I have some .jpg images that are not showing in Edge (but show fine in IE, Chrome, Firefox) instead all I see is a color (different color for different image - even though there is no background color or any other color attributed - so should be white if image not showing - these images are using styles of radius and shadow, but removing them makes no difference.

I have a problem that has just recently occurred, it may be a browser bug in Edge as I am sure it was working previously, but I have some .jpg images that are not showing in Edge (but show fine in IE, Chrome, Firefox) instead all I see is a color (different color for different image - even though there is no background color or any other color attributed - so should be white if image not showing - these images are using styles of radius and shadow, but removing them makes no difference.

When I right click and save image the correct jpg is downloaded, the link is good, as I say it works on other browsers, but no longer on edge (nothings changed that I know of). Any ideas?

as seen on Edge:

As seen on other browsers:

I have tried removing styles and checked the divs for overlaps or other common problems, everything looks OK.

.sitelinks {
margin: 10px 42px 10px 45px;
padding: 20px 5px 20px 5px;
width: 180px;
vertical-align: top;
display: inline-block;
}
.sitelinks:hover {
background: #CCC;
}
.sitelinks img {
width: 1px;
height: 1px;
box-shadow: 3px 5px 12px #000000;
border-radius: 50%;
}
.sitelinks img:hover {
-o-transform: scale(1.06);
-webkit-transform: scale(1.06);
-ms-transform: scale(1.06);
-moz-transform: scale(1.06);
transform: scale(1.06);
}
.desc {
padding-left: 10px;
padding-top: 10px;
width: 160px;
text-align: center;
font-size: 1.4em;
color: #333;
font-family: 'Quicksand', sans-serif;
font-weight: 600;
}
<div class="sitelinks">
<a href="services.php" target="_self"><img id="link1" 
src="assets/img/services_ico.jpg" alt="Our Services"></a>
<div class="desc"><a href="services.php" target="_self">Our Services</a> 
</div>
</div>
<div class="sitelinks">
<a href="contact.php" target="_self"><img id="link2" 
src="assets/img/contact_ico.jpg" alt="Contact the team"></a>
<div class="desc"><a href="contact.php" target="_self">Contact Us</a></div>
</div>
<div class="sitelinks">
<a href="photos.php" target="_self"><img id="link3" 
src="assets/img/gallery_ico.jpg" alt="Picture Gallery"></a>
<div class="desc"><a href="photos.php" target="_self">Photo gallery</a> 
</div> 
</div>
<div class="sitelinks">
<a href="reviews.php" target="_self"><img id="link4" 
src="assets/img/feedback_ico.jpg" alt="Customer reviews"></a>
<div class="desc"><a href="reviews.php" target="_self">Customer 
testimonials and reviews</a></div>
</div>

There are four images that are the same html

javascript html css image

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Product Image Slider | HTML/CSS/JavaScript

Product Image Slider | HTML/CSS/JavaScript. Building our own product image slider using HTML/CSS & JavaScript.

How To Create An Image Gallery In HTML, CSS & JavaScript

A lightbox gallery is basically used to view the gallery images in detail specifically. You can code the JavaScript to do so but also we can use some downloaded JS and CSS. In this article, we will download the lightbox and attach the JS and CSS files into our code. For our own design satisfaction, we can also use the CSS code as we want. We will divide the task into three sections. In the first section, we will create the structure in the second section we sill add som CSS for our own purpose. In the last section, we will link the downloaded JS snd CSS files. How To Create An Image Gallery In HTML, CSS & Javascript.

How to Build An Image Gallery In HTML CSS & JavaScript

A lightbox gallery is basically used to view the gallery images in detail specifically. You can code the JavaScript to do so but also we can use some downloaded JS and CSS. In this article, we will download the lightbox and attach the JS and CSS files into our code. For our own design satisfaction, we can also use the CSS code as we want. We will divide the task into three sections. In the first section, we will create the structure in the second section we sill add som CSS for our own purpose. In the last section, we will link the downloaded JS snd CSS files. How to Build An Image Gallery In HTML CSS & Javascript Tutorial.

Image Slider Toggle Button with HTML CSS & Javascript

In this video you'll learn how to create an Image Slider Toggle Buttons or slider control in HTML CSS & JavaScript. Earlier I have shared a Responsive CSS Profile Cards using HTML & CSS. Now it's time to create an image slider buttons using JavaScript that slides images forward and backward.

Building Our Own Product Image Slider using HTML/CSS & JavaScript

Building Our Own Product Image Slider using HTML/CSS & JavaScript - Product Image Slider | HTML/CSS/JavaScript