Where I can upload my image which I can ref in jsfiddle.net?

Hello,
I need to upload my JS/vuejs code under jsfiddle.net
and in this code in css part there are links to images of the project.
Can you advice some service where I can upload my image and have link to it under https
which I can ref in jsfiddle.net ?

Thanks!

If you don’t have your own place on the web to host images, there are various sites for image uploads and photo sharing available with free access.
This image I uploaded to Flickr and embedded in Codepen, I don’t have a jsfiddle account, but the principles are the same with Codepen. Flickr allows up to 1000 images for free and unlimited for paid accounts, there are other sites you can use, try searching.

3 Likes

I’ll add Cloudinary to the list.

As you can read, in their most basic form, they’re a CDN for your images. They can also optimize them before sending them to the client, meaning you can upload a high-res image, then request a scaled down/resized version in a variety of formats.

4 Likes

Thanks!
I registered myself at flickr
and upload a file which looks like https://prnt.sc/srfvjp
and has url like
https://www.flickr.com/photos/NNNN@NNN/NNN/in/dateposted-public/
How can I make a public link from it which I can use in jsfiddle?

If you go to the photo in question and click the share button, then click Embed and select the dimensions you want, Flickr will spit out the embed code for you:

<a data-flickr-embed="true" href="https://www.flickr.com/photos/blueocean64/18795217173/" title="hill">
  <img src="upload://ntfPghqOs46xUBqzXoeUYBWYCj9.jpeg" width="500" height="281" alt="hill">
</a>
<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

You can pull the img tag out of the embed code and use that in JSFiddle.

i.e.:

<img src="upload://ntfPghqOs46xUBqzXoeUYBWYCj9.jpeg" width="500" height="281" alt="hill">

Gives you:

1 Like

Thanks! But seems the original filename is not saved… Is this possible to keep the original filename of the original filename ? I have free account.

I don’t think so. Oftentimes, one alters the name of uploaded files to append a timestamp or other unique identifier to avoid naming clashes (i.e. two files called dog.jpg).

Is there a reason you need to keep the original filename?

supposed these images for css code . Sure I would prefer to keep the original filename

I’m not sure I understand, sorry.

You can reference them in CSS, if that is what you mean:

body {
  background-image: url("https://live.staticflickr.com/540/18795217173_39e0b63304.jpg");
}

But, I guess you knew that.

If you absolutely need to keep the original filenames, one way to do so would be to rent a bit of webspace with a popular provider and use that.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.