Search code examples
javascripthtmljsfiddle

How to Add an External Image to JSFiddle?

I try to add an external SVG image in my JSFiddle, as below:

<img src="http://www.sybase-recovery.com/images/icons/facebook-f.svg"/>

But that does not work, JSFiddle will not show the image.

I try to add the image as an external resource, still not work.

My Fiddle is at https://jsfiddle.net/alanccw/n3usLt69/1/

Solution

  • You can check in your console:

    Mixed Content: The page at 'https://jsfiddle.net/' was loaded over HTTPS, but requested an insecure script 'http://www.sybase-recovery.com/images/icons/facebook-f.svg'. This request has been blocked; the content must be served over HTTPS.

    Then I try to use HTTPS:

    <img src="https://www.sybase-recovery.com/images/icons/facebook-f.svg"/>

    It show another issue on SSL Certificate:

    SSL

    Just change your image to another resource, for example:

    <img src="https://image.freepik.com/free-vector/farm-landscape-scene-with-barn-windmill_1308-58771.jpg"/>