HTML & CSS image wont show up, shows up broken in CODEPEN, but shows up fine in browser or W3SCHOOLS

[richard.g.engle]

i have an image "http://ryanspickapart.com/images/credit-card-icons.png which shows up fine in a browser, but shows up as a broken link in my code at codepen https://codepen.io/richardengle/pen/rNMRzzE
the other image [dog] shows up fine... any ideas why the one image
the code is :
<img src="http://ryanspickapart.com/images/credit-card-icons.png" alt='image wont load'>
<br>
<img src='https://images.unsplash.com/photo-1...xlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80' alt='image works fine' >

 

[Malcolm]

Hi there,

Welcome to Code Forum!

I’ll help you shortly, however please place your code within the </> formatting.

 

[richard.g.engle]

i have an image "http://ryanspickapart.com/images/credit-card-icons.png which shows up fine in a browser, but shows up as a broken link in my code at codepen https://codepen.io/richardengle/pen/rNMRzzE
the other image [dog] shows up fine... any ideas why the one image
the code is :

<img src="http://ryanspickapart.com/images/credit-card-icons.png" alt='image wont load'>
<br>
<img src='https://images.unsplash.com/photo-1...xlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80' alt='image works fine' >

 

[Malcolm]

i have an image "http://ryanspickapart.com/images/credit-card-icons.png which shows up fine in a browser, but shows up as a broken link in my code at codepen https://codepen.io/richardengle/pen/rNMRzzE
the other image [dog] shows up fine... any ideas why the one image
the code is :

<img src="http://ryanspickapart.com/images/credit-card-icons.png" alt='image wont load'>
<br>
<img src='https://images.unsplash.com/photo-1...xlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80' alt='image works fine' >

You can edit your original post at the top by clicking edit.

i don’t see anything really wrong. It could probably be blocked by codepen maybe?

edit: seems like CodePen will block urls. Try uploading the images to GitHub or Google Drive.

 

[Krusty the Senile]

Could have something to do with HTTPS. Looks like the first image is HTTP. https://blog.codepen.io/documentation/asset-hosting/ indicates towards the bottom of the page that they don't seem to approve of accessing HTTP assets from a HTTPS page.

 

[Tealk]

Yes @Krusty the Senile is right. But this also affects browsers, so called "mixed content" is blocked.
Since SSL certificates are available for free, there should be no more websites that are delivered without SSL.

@Malcolm
I have been working a lot with CodePen myself in the last few days as I am starting a Vue.js project.
It doesn't block anything, everything that doesn't work is due to user error.

 

[richard.g.engle]

Could have something to do with HTTPS. Looks like the first image is HTTP. https://blog.codepen.io/documentation/asset-hosting/ indicates towards the bottom of the page that they don't seem to approve of accessing HTTP assets from a HTTPS page.

yup, that was it .... security ... thanks :]

 

[Malcolm]

@Malcolm
I have been working a lot with CodePen myself in the last few days as I am starting a Vue.js project.
It doesn't block anything, everything that doesn't work is due to user error.

What's it doing with HTTP then?

 

[Tealk]

What's it doing with HTTP then?

You mean mixed content? This is not blocked by CodePen this is blocked by the browser. I think for Firefox there are also settings to bypass this.

 

[Malcolm]

You mean mixed content? This is not blocked by CodePen this is blocked by the browser. I think for Firefox there are also settings to bypass this.

On chrome I’m still able to go to http