Images in CodePen

21

I was able to do it with cloudinary.

Thank you very much for the reply, I’ll try to post in that manner the next time. :slight_smile:

22

Thank you so much. I found several ways but none of them was working. I used to click ‘Copy location’ function on images to copy the link but it was not a proper way. Getting link from ‘Inspect Element’ helped me =)

23

Solution using Github, after a little research:

  1. Create a repository on Github.

  2. Upload the images to your repository

  3. Open the image in Github and turn it into a embeddable version, appending “?raw=true” after the URL, like:

https://github.com/nanquim/freeCodeCampNanquim/blob/master/pauloFreire1.png?raw=true

This will give you a URL you can use in code pen, something like:

https://raw.githubusercontent.com/nanquim/freeCodeCampNanquim/master/pauloFreire1.png

Thanks to:

9 Likes
24

hey i have a question. I just want to make sure I did it right.
my code that goes in my img element looks like this:

is this correct?

25

As long as the URL resolves to an image, it’ll show up.

26

I tried to use DropBox but it doesn’t work as well in Google Drive…
i used gitHub also but i couldn’t find the upload button… can someone confirm if these are still working? Thanks, I appreciate it :slight_smile:

27

Yes, it is. Jus open your repository:

Capturar.JPG1016×303 49.5 KB

28

IT works but unfortunately I can’t use svg files in this way, someone tried used to try svg files on GIThub ?

29

Thanks a lot! It worked for me too!

30

Use https://postimages.org/ . Its a free image hosting website that provides every link you need (src).

No one else can see your images

You can sign in and save them to a folder, else if you dont have a link you basically loose access.

1 Like
31

Good to know I didn’t know this one :wink:

32

Best idea, thanks so much, worked for me too.

33

I have been using cloudinary.com for all of my image needs, they have more than enough free storage for the projects.

34

Just chiming in to point out the obvious: if you have web hosting, you can host your images there. If you don’t have web hosting, it may be a smart idea to find some, since you’re learning to code for the Web and you should probably figure out how to set up domains and namespaces and use cPanel. You don’t have to keep your hosting account forever, you can cancel it, but it might be smart to get a small account for stuff like this :slight_smile:

36

THanks for the help! Github worked for me too! Nice, quick workaround to avoid a dead link to your image later. I haven’t spent much time on Github yet, as I am just starting out teaching myself. Thanks Again!

37

HI.
Do you think its ok for a begginer like me if I switch to GitHub ?I finished 111 lesson of free camp and Im starting tribute.

38

i did it.it works.
thank you.

39

This was so easy, thank you :slight_smile:

1 Like
40

Thank you so much. For me this one is the easiest way for now. I have been watching videos on youtube, but your answer and that article made my day :heart:

41

I’m so glad I found your answer here! The imgur broken links were driving me nuts! I switched over to Google Drive and all is good. Thanks!