在 react js 中使用新闻 api 时加载资源失败：net::ERR_SSL_PROTOCOL_ERROR

Question

I am working on a reactjs website. The website is basically a news website in which i have used news Api to fetch data but in news api data there is a image url "https://cdn.siasat.com/wp-content/uploads/2021/07/Antarctica.jpg" that is not working .I want to replace it with an image from my folder .I have written a code for this purpose that is successfully changing it to img.jpg image of my folder but it is not showing in my localhost site.

This is the logic i have written to change emptyimage url .
export class Newsitem extends Component {
  render() {
    //   this is called destructuring in js meas you can fetch description and title from single prop
      let {title,description,imageurl,newsurl}=this.props
    return (
      <div className='my-3'>
<div className="card" style={{width: "18rem"}}>
<img src={imageurl==="https://cdn.siasat.com/wp-content/uploads/2021/07/Antarctica.jpg"?"img.jpg":imageurl}className="card-img-top" alt="..."/>
<div className="card-body">
<h5 className="card-title">{title}...</h5>
<p className="card-text">{description}...</p>
<a href={newsurl} target="_blank" className="btn btn-sm btn-primary">Read more...</a>
</div>
</div>
        
      </div>
    )
  }
}

This is the code after running and inspecting it in console :
<img src="img.jpg" class="card-img-top" alt="...">

This code has changed the url to img.jpg but i don't understand why it is not displaying in my website. My console is showing this "Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR cdn.siasat.com/wp-content/uploads/2021/07/Antarctica.jpg:1".I have already change this url to img.jpg

Answer 1

This may not answer your specific question but it may help others who get the same error. I got the Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR error message on a web application I developed which is hosted in Azure. There are images on the page that are hosted on a server with a virtual directory. The URL used the HTTP protocol and had a port number in the URL, like this:

http://remote1.nikecaps.com:12345/ipad_images/Style Item/SPORT-CLIMB.jpg

This link worked when we navigated to it locally, outside of the new web app. However, in the Azure web app, we got the error.

Originally, the browser complained about having to serve images with URLs that use HTTP on a site that uses HTTPS. So we changed the image URLs to use HTTPS, but then we got this specific SSL protocol error you are receiving now.

Our fix was to remove the port number, now that the URL is HTTPS.