Images not load due to HTTPS error

I’m under HTTPS but the module tries to load the images trought HTTP, it causes a security error in browser.

Example: https://stackblitz.com/edit/ng-lazyload-image

The URL is right, but the output is wrong.

Error:

Mixed Content: The page at 'https://stackblitz.com/edit/angular-material-product-list-v24izo?file=app%2Flist-example.ts' was loaded over HTTPS, but requested an insecure image 'http://lorempixel.com/100/100/shop/'. This request has been blocked; the content must be served over HTTPS.

[tjoskar]

Sorry for the out-of-scope issue.

No worries

But, just to know, any idea why ng-reflect is different from the real src?

ng-reflect is for debug purpose and will not be included if you build the app with production config. I do not know why the reflect sting is truncated but I guess Angular has set a max length of the string.

Also, do you have any suggestion of images API for replacing lorempixel.com?

No, not really. I trend to use placecage.com but there are some other goodness out there.

[tjoskar]

@odahcam, the problem seems to be lorempixel.com. It redirects to http if the url doesn’t end with a slash (for some reason). If you go to https://lorempixel.com/112/112/food it will redirect to http but if you visit https://lorempixel.com/112/112/food/ it does not redirect you.

It seems to work fine if you just change:

- let src = `https://lorempixel.com/${spec.size}/${imgName}/ ${spec.query}`;
+ let src = `https://lorempixel.com/${spec.size}/${imgName} ${spec.query}`; 

and:

- return `https://lorempixel.com/112/112/${imageName}`;
+ return `https://lorempixel.com/112/112/${imageName}/`;