I signed up at frondend mentor and I undertook an HTML project, I completed the project using a mobile app but when I consoled on a browser, my images were not showing. I decided to use an online editor and still encountered the same problem because my file path were local. So I need help with the following:
How do I change my image path from my local file path?
Where and how do I set up my projects inorder to get a local copy for submission?
Also, is there a way I can upload an online file to my github repository?
For images, you kind of have two choices: have them local on the server, or host your images somewhere and grab them from the web. Both approaches have strengths and weaknesses.
I’ve never tried serving an image from github. I suppose in theory there would be a way to do it, especially from gitpages. But there are plenty of other places to host images - I usually just throw them into an AWS bucket.
You can also use an online editor like CodeSandbox which allows you to upload files. That would allow you to use the same relative image paths as you have locally.
If your whole project is on GitHub, then it does make sense to have your images in that project repository too. If you are using a service like CodePen for your project, then I suggest searching for free image hosting and using one of those services. Tools that aren’t intended to be used as asset hosts often take steps to make it harder or unreliable to use them that way.
Just know that using GitHub as a CDN isn’t really its main purpose and it’s not guaranteed to be the fastest (or most reliable solution). But it should be fine for what you are using it for, I have never seen any major issues with it. But I likely wouldn’t use it as a CDN for “real” projects.
Please can you suggest a hosting site that supports svg file type?, or any other one for my upcoming projects.
In the mean time, I will stick to github.
I would suggest you just use something like Netlify or Surge.sh for the hosting. I never used the drag and drop feature of Netlify but that seems about as simple as it can get.
I’d suggest keeping your images stored in your project since it sounds like you’re just getting started. Just download any images you’re using and put them in an appropriate top-level folder in your project (call it “assets”). You’re likely to run into image linking issues anyway (unless you use something like AWS), when trying to link to images stored on 3rd party websites. And make sure the image files aren’t too big - compress any JPG files, and reduce any PNG files (and make sure to use PNG for vector graphics). SVG files are intrinsically small, so no need to worry about those.
When you push to GitHub, your image files will stay with your repo this way.
Ultimately with more complex projects it does make more sense to use external image hosting (i.e. AWS S3, or AWS CloudFront), but as long as you don’t have too many image files, and they’re not too big either (no single image should be more than 200 KB), it’s fine to keep them stored with your project.
Also, wherever you can, you should use “royalty free” images, so you don’t run into any legal issues using any images.