Preview Image does not use HTTPS

[cihanandac]

Describe the bug
While testing the website I am working on with PageSpeed Insights, I realized that the pages that use preview images are getting this warning: "Does not use HTTPS". It is dropping the score for the 'Best Practices'. If the page doesn't have a preview image shown on it, then it does not have this issue.

Link for the webpage: https://rietveldschroderhuis.intk.com/nl/over/centraal-museum-rietveld
Link for the PageSpeed test: https://pagespeed.web.dev/analysis/https-rietveldschroderhuis-intk-com-nl-over-centraal-museum-rietveld/l1bq5otzia?form_factor=desktop

Link to repo (line 72) : https://github.com/cihanandac/new-RietveldSchroderhuisWebsite/blob/main/frontend/src/components/theme/Header/HeroSection.jsx

The preview image is called with the following code:

<Image
  image={content.preview_image}
  width="100vw"
  height="90vh"
/>

To Reproduce
Steps to reproduce the behavior:

1. Go to https://pagespeed.web.dev
2. Write the link to the URL section -> https://rietveldschroderhuis.intk.com/nl/over/centraal-museum-rietveld
3. Click on -> Analyze
4. Scroll down to 'Best Practices' section
5. See error 'Does not use HTTPS'

Expected behavior
Doesn't have "Does not use HTTPS" warning and has a better score in best practices.

Screenshots

Software (please complete the following information):

• Volto Version: 16.20.8
• Plone Version: 6.0.5
• Plone REST API Version: 8.39.1

[manoharkumarsingh]

@cihanandac If the page doesn't have a preview image then you shouldn't render . I hope this will help you to fix issue

[cihanandac]

Thanks, @manoharkumarsingh. Didn't help to solve it, but I understand your point.

[avoinea]

@cihanandac You should always use flattenToAppURL. See Image Block for example.

[cihanandac]

Thanks for the tip @avoinea. This component is also using Image Block, thus it is utilizing flattenToAppURL. Please correct me if I am missing something here but I believe the issue is about something else.

[avoinea]

@cihanandac No, it's not. It's custom code all the way down 😄

• https://github.com/cihanandac/new-RietveldSchroderhuisWebsite/blob/main/frontend/src/components/theme/Header/HeroSection.jsx#L72
• https://github.com/cihanandac/new-RietveldSchroderhuisWebsite/blob/main/frontend/src/components/theme/Header/HeroSection.jsx#L4
• https://github.com/cihanandac/new-RietveldSchroderhuisWebsite/blob/main/frontend/src/components/Image/Image.jsx#L37-L45
• https://github.com/cihanandac/new-RietveldSchroderhuisWebsite/blob/main/frontend/src/components/Image/Image.jsx#L3
• https://github.com/cihanandac/new-RietveldSchroderhuisWebsite/blob/main/frontend/src/helpers/images.js#L31

[cihanandac]

Thank you so much again @avoinea. Looks like you are right. I don't even know how I missed this one 🤦 .