search

clutch-creator / clutch

The Next Website Builder for High-Performance Marketing
https://clutch.io
MIT License
50 stars 4 forks source link

When using a block as an img tag, setting srcSet breaks the render #26

Closed daprieu closed 1 year ago

daprieu commented 1 year ago

How to reproduce

  1. Open a project
  2. Drag out/ add a block to composition
  3. set block tag to img
  4. add src and srcSet props
  5. add working image src prop for example placeholder image
  6. set srcSet prop, this can be empty quotes or set as " http://srcset.salcode.com/images/2000x1000.png 200w, http://srcset.salcode.com/images/2000x1000.png 300w"

Describe the bug

When following the steps above the image will act as if it is broken in the frame/ page. It only behaves this way in Clutch tool. Using the popout window and viewing the page or a publish version of the img will show it correctly

Expected behavior

Img should continue rendering as normal. If there is an error the error should be clear to understand what about the prop is incorrect.

Operating System

macOS 13.5

Clutch Version

Desktop: 1.201.0 [Content] env

Other

https://github.com/clutch-creator/clutch/assets/57027607/fd06f77d-d364-4d10-96c6-63f6208530ab

delila94 commented 1 year ago

Hey @daprieu I was tackling this issue and it seems you used http instead of https to serve images which resulted in error:

Mixed Content: The page at 'https://cdn.clutch.io/' was loaded over HTTPS, but requested an insecure image 'http://srcset.salcode.com/images/2000x1000.png'. This request has been blocked; the content must be served over HTTPS.

You should be able to see this error in console Development-> devtools-> projectName

"Mixed Content" warnings occur when an HTTPS page is asked to load a resource over HTTP. You are trying to access via "http" on a "https" site, this is the reason why you can't see it in clutch and in any envs except local and you can in browser, if you put https for image url it should work?

andressaroberts commented 1 year ago

@daprieu This primitive is not to be used in this way. Use image primitive, please.