Question

我正在寻找一种解决方案，以强制来自fetch API 的图像进入https而不是http

API 从获取的http文件中以JSON的形式返回图像结果，但这在控制台中向Mixed Content发出警告

我以

的身份进入componentDidMount

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
        });
      });
  }

，然后通过mapping 数据

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

当不是url的{{1}}时，如何强制{i.rating_image_url}的{{1}}使用https？

Answer 1

通过使用正则表达式，类似于：

{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>
      );
    })}

Answer 2

const url = new URL(originalUrl);
url.protocol = url.protocol.replace('http', 'https');
console.log(url.href);

此方法使用内置的URL类进行完全解析，然后在协议上使用字符串替换。

Answer 3

只需更改此代码即可检查您是否正在接收图像

<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>
  );
})}

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

希望它对您有帮助。

将获取的图像数据强制为https

3 个答案: