ERR_SSL_PROTOCOL_ERROR with image sources Razor pages - asp.net

Question

I am currently working on an ASP.NET Core application with Razor pages. The API endpoints are hosted in pre-production server. When I get an image link which is stored in the same server as the apis, through api, and want to display it in the razor page the image can't be shown due to ERR_SSL_PROTOCOL_ERROR. When I inspect element and get the src of the image tag and open it in a new tab it will open. Also if I use that source in a html page it still opens. Since the pre-production server does not have ssl certificate configured, is there any chances the PageModel abstract class of the razor page to have any validation on that, since it is working on plain html?
EDIT:
I am providing from the API the image tag as html:
<a href ="http://imagesourceIPExample">
<img src="http://imagesourceIPExample">
</a>
I am getting that string from an ajax request
$.ajax({
//ajax call params,
success: function(data){
$(`#messageDiv`).append(data.message);
}
}).
Now when I inspect the page and click the link in the anchor tag I would open fine. Also if I click it from the view. But the image isn't showing and the console shows that SSL_PROTOCOL_ERROR. And image link is http.

Answer 1

First of all, razor PageModel doesn't validate image loading.
It seems like you are working with secured https site and then when you append plain http image links, browser refuses to load them due to its Mixed Content policy. But when you load image in a separate window it will load just fine because the "mixed content" problem is gone, you load only http resource, no https involved.
Consider converting you image links to https, it should fix the problem.