Adding Images in Jsfiddle

Adding images in JSfiddle

You cannot link your LOCAL image to a website, first upload your image to some image uploading service and than use the path in your jsfiddle

Example

Upload your image to some image uploading service for example postimage

After uploading your image, copy paste the url in your jsfiddle and it will work...

How to Add an External Image to JSFiddle?

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:

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"/>

Adding an image to a jsfiddle

Reposted as an answer - you can't upload anything to jsFiddle. Please either upload it to public dropbox folder or any other service which allows that. You can also use image placeholders if image's content is not important - placekitten.com

Adding images to JSfiddle

You cannot link your LOCAL image to a website, first upload your image to some image uploading service and than use the path in your jsfiddle

Example

Upload your image to some image uploading service for example postimage

After uploading your image, copy paste the url in your jsfiddle and it will work...

Source

Getting the image resources from jsfiddle

Looks fine here?

If you want to inspect elements I recommend Google Chrome and it's built in console, I like it much better then firefox + firebug.

JSFiddle CSS problem? Link border around images

stender's answer is the best, use always em unit:

.one img, .two img {
  max-width: 100%;
}

because JSFiddle added border. If you inspect code you will see:

*, ::after, ::before {
  box-sizing: border-box;
}

React jsfiddle with react-image-gallery

jsfiddle for react is not user-friendly IMO, try using codesandbox.io

I took your code and here is a working sample:

https://codesandbox.io/s/modest-ramanujan-tth2w?file=/src/components/react-image-gallery-test.js

The documents don't say it, but you also need to import the css, which you can see in the example.

If you really need to get this working in jsfiddle, let me know and I will pull some hair out and give it a go.

---

Related Topics