在 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。