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

Question

我正在一个 reactjs 网站上工作。 该网站基本上是一个新闻网站，我在其中使用新闻 Api 来获取数据，但在新闻 api 数据中有一个图像 url “https://cdn.siasat.com/wp-content/uploads/2021/07/Antarctica. jpg” 不起作用。我想用我文件夹中的图像替换它。我为此编写了一个代码，成功地将其更改为我的文件夹的 img.jpg 图像，但它没有显示在我的本地主机站点中。

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="...">

此代码已将 url 更改为 img.jpg 但我不明白为什么它没有显示在我的网站上。 我的控制台显示“加载资源失败：net::ERR_SSL_PROTOCOL_ERROR cdn.siasat.com/wp-content/uploads/2021/07/Antarctica.jpg:1”。我已经将此网址更改为 img.jpg

Answer 1

这可能无法回答您的具体问题，但它可能会帮助其他遇到相同错误的人。 我在 Azure 中开发的 Web 应用程序上收到Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR错误消息。 页面上有托管在具有虚拟目录的服务器上的图像。 该 URL 使用 HTTP 协议，并且在 URL 中有一个端口号，如下所示：

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

当我们在本地导航到它时，这个链接有效，在新的网络应用程序之外。 但是，在 Azure Web 应用程序中，我们收到了错误。

最初，浏览器抱怨必须在使用 HTTPS 的站点上提供带有使用 HTTP 的 URL 的图像。 因此，我们将图像 URL 更改为使用 HTTPS，但随后我们收到了您现在收到的特定 SSL 协议错误。

我们的修复是删除端口号，现在 URL 是 HTTPS。