Hi, I just wanted to post about something I had trouble with but figured out and might help someone else out. There was a lot of information out there that wasn’t specific to the problem I was having.
I have my own graphics and images that I have created stored on my computer that I could not add to my html img src code. I would need an image url. The quickest, easiest way I found to do this was uploading it on to my google drive, right clicking (pc) or control-click (mac) on the file/image, share and changing general access to “Anyone with a link”.
Next, “copy link” is located on the bottom left corner, click this and go to this site Embed Google Drive Images in your Website and Emails
to get the google embed drive code. You paste the link into the google drive link. Generate code. There is a good explanation of what the conversion is. I tried pasting the link directly from google drive but it would not work in my html code for img src. I tried this conversion and it worked for me.
If anyone else has other guidance to using your own images from your computer to html, please do tell! I am new at this and this was the only solution I found that worked for me.
Google Drive is one way of hosting images but it’s not a dedicated image hosting site, so the process isn’t as streamlined. There are plenty of image hosting sites out there, but I tend to use flickr. I’m certainly no expert though.
Why you couldn’t add your images to the html file from computer?
For example, if all your images are stored in the ‘img’ folder, and your index.html file is in the same folder, together with the ‘img’ folder, you can make a link to any of your images by adding this address to your src attribute:
<img src="./img/yourimage1.jpg">
I hope that I have understood the issue. If you explicitly want to add images as url from web, than disregard this.
Yeah, I misread the post. I second this. It’s a piece of cake to add images directly if you have them stored on your PC. The src attribute is simply the path to the file.
Hi, thank you for your response. I tried adding the image file location (pathname) from my computer but the image will not show. What it shows is a broken or blank box. I have the png file located in a folder on my desktop and I’m wondering if it’s a location issue? Should it be located somewhere else? I even copied the pathname
so there wouldn’t be any typos so I am still not sure why this isn’t working - I haven’t given up on solving that. So I had to think a little bit outside of the box, at least with me being a beginner , this was my out of the box way of solving my issue. It’s probably a round about way but I tried and thought if anyone else was having this issue, I could post it. But I also wanted to know if there was a more straightforward way or an explanation as to why the straightforward way of adding the location of your image from my computer to the img src was not working for me.
Here is my code I tried in the beginning before I moved on to going the google drive route. Maybe you can spot where I went wrong. I appreciate your help - Thank you!
Hi, thank you for your response. I am directly coding on freecodecamp in the lessons so there isn’t a separate file for the code…that I know of. I don’t keep my photos in an image folder. I have them located in a temporary folder on my desktop. I tried copying the pathname and adding to my img src. I did read something about having your text or index html file in the same folder as your images but I’m not using that while I am directly coding on freecodecamp, but maybe there is something I am missing or don’t understand. I am a beginner!
Because I couldn’t find a straightforward solution to my issue that worked , I figured I could upload my image to my google drive, share, copy link and convert the link into a url or html tag so it would work for the time being.
Does the index.html file on freecodecamp automatically save onto your drive when you start coding? I’m going to see if I can find it and if it’s not there, then see if I can save it and put my image in the same folder, copy the pathname and then see if that works…
You can write code locally (i.e. on your machine) or online. When you’re coding online on FCC, the code is not stored locally, but on the FCC servers, so you don’t have direct access to the project folders and files. You can’t directly upload or link image files from your machine in this case. You can only insert images by hosting them online and then linking to the url (e.g. via flickr or Google Drive).
If you’re coding locally, you would have a project folder on your machine, inside which are stored all of the associated files. For a frontend project like a webpage, you’d usually have an index.html (or similar) file at the root level of the folder, along with a styles.css file. Images and other such resources would be stored in folders within your project folder. If you had the image logo.png stored in your images folder for instance, you could then link to it in your HTML doc with the src attribute ‘./images/logo.png’ as opposed to hosting it online and using a url.
As for writing your HTML code, you could do this pretty much however you like. You can even open a notepad app on your PC and write HTML directly in there if you like… you just have to remember to save the file in your project folder, with a .html file extension.
The more practical way of going about this though is to use VSCode or another similar development app, which makes the process of coding much more user-friendly.
No, the fCC index.html file is not saved on your computer when you start coding on the platform.
Here is one simple example:
I have created a folder named “19. eCommerce Website Master”. In this folder, as you can see I put all my files, and created another folder “images” for all my images.
If I want to add a link to one of my images, in the HTML file, I proceed as follows:
Thank you, I think I understand that. Please correct me if I don’t. Do you mean when you are coding outside of FCC and not on their platform? If so, then I understand that. If not…then I think I’m lost.
So what I tried was saving the FCC index.html into a folder and put my image into that same folder. That didn’t work, so I’m thinking that didn’t work is because I’m using FCC module and I’m expecting that to show on the preview when the module is using the index.html that is active and not the file I saved from it into the folder where I have my image located. I hope I make sense there. So, essentially there are two index.html, the active one on FCC as shown in the tab and then the save as from that active index.html.
If I was to create my own code outside of the FCC module, my image(s) would be put in the same folder as my index.html and then it would work when I apply the pathname for my image into the img src.
Ok, VSCode, that is one I didn’t know. I knew of Notepad and TextEdit.
Thank you igorgetmeabrain, that is what I came to think…and that is why my image wasn’t showing but I was not confident in that. I did know that I could use an url instead, which ultimately led me to going the google drive route.
I just kept thinking I was missing something with adding an image from my computer. I tried saving the active index.html on FCC into a folder and put my image there. Then I realized well that won’t work because the FCC module is using the active one or what is stored on their server as I am coding. I wasn’t confident in that as I am still learning but reading your explanation makes a lot of sense and I appreciate that.
I think I thanked DobarBREND for the VSCode option, my bad…I see now that you suggested it, so thank you. I knew of Notepad and TextEdit. I will look at VSCode as an option for coding locally.
Thank you for taking the time to explain things!
Much appreciated
, this was my out of the box way of solving my issue. It’s probably a round about way but I tried and thought if anyone else was having this issue, I could post it. But I also wanted to know if there was a more straightforward way or an explanation as to why the straightforward way of adding the location of your image from my computer to the img src was not working for me.