Javascript 强制获取的图像数据到https

我正在寻找一种解决方案，以强制来自

获取
API的图像位于
https
而不是
http

API从获取的
JSON
文件中返回图像结果为
http
，但这会在控制台中警告
混合内容

我正在获取组件didmount
作为

componentDidMount() {
    var self = this;
    const proxyurl = 'https://cors-anywhere.herokuapp.com/';
    const url = `//api.tripadvisor.com/api/partner/2.0/location/${this.props
      .tripAdvisorId}?key=${AuthKey}`;
    fetch(proxyurl + url)
      .then(data => data.json())
      .then(data => {
        self.setState({
          reviewData: data,
          isLoading: false
        });
      });
  }

然后映射
数据

{this.state.reviewData.reviews.map(i => {
  return (
    <div key={i.id}>
      <img src={i.rating_image_url} alt={i.title} />
    </div>
  );
})}

{this.state.reviewData.reviews.map（i=>{
返回(
);
})}

如果未从
获取
返回
url，如何强制
{I.rating_image_url}
中的
url
，
使用正则表达式，例如：

{this.state.reviewData.reviews.map(i => {
      return (
        <div key={i.id}>
          <img src={i.rating_image_url.replace(/^http:\/\//i, 'https://')} alt={i.title} />
        </div>
      );
    })}

{this.state.reviewData.reviews.map（i=>{
返回(
);
})}

此方法使用内置URL类进行完全解析，然后在协议上使用字符串替换。
只需更改此代码即可检查是否接收到图像

<img src={i.rating_image_url ? i.rating_image_url : i.rating_image_url.replace(/^http:\/\//i, 'https://')} alt={i.title} />



这样我们就可以检查是否得到了它的值

为了更好地理解，您也可以这样做

{this.state.reviewData.reviews.map(i => {
  console.log(i.rating_image_url);
  return (
    <div key={i.id}>
      <img src={i.rating_image_url} alt={i.title} />
    </div>
  );
})}

{this.state.reviewData.reviews.map（i=>{
console.log（即评级、图像和url）；
返回(
);
})}

这将显示您在浏览器控制台上的rating_image_url中接收到的任何数据

希望对您有所帮助。
谢谢您，布拉德。我首先看到了Anas的答案，这很有效，但在我接受他们的答案之前，我想知道您的解决方案是否有好处，或者这只是实现结果的另一种方式？Cheers@Darren最好的好处是，如果您将要相对于的URL作为第二个参数传递。例如，假设您的
originalUrl
只是
/something.html
。这不是一个完整的URL，没有协议或任何东西，所以没有什么可替换的。如果您使用
新URL（originalUrl，window.location.href）
，您将获得一个包含基本域、协议、新路径和所有内容的URL对象。它为您解决了所有问题，然后您所要做的就是替换协议。这是一种更可靠的方法，但根据问题的背景，可能没有必要。谢谢@Brad，很好的解释。我确实很快在代码中实现了它，但是因为返回的数据不是一个url，所以我也必须在这里映射数据，因此我继续使用另一个解决方案。我确实有另一个场景，我将在其中实现这一点。谢谢你的帮助，祝你度过愉快的一天。
{this.state.reviewData.reviews.map(i => {
  console.log(i.rating_image_url);
  return (
    <div key={i.id}>
      <img src={i.rating_image_url} alt={i.title} />
    </div>
  );
})}