I want to use images from my own computer, but can`t upload

Hello folks,

I am working on one of my first HTML projects. I would like to upload one my own images from my computer to the HTML code using <img src=“source>”, but I am not sure how I can do that.

The study program teaches how to upload an image from another web source but there is nothing on how to upload from your own computer - at least so far.

Do I need to create a file and upload the image to the file first? Or is there another way to do this? I don`t want to use pictures from the Internet due to copyright issues.

Thanks in advance,
Newbie Douglas

1 Like

One method that I discovered…

I uploaded my image to Facebook.
Went to the image.
Right clicked - Copy image link
Pasted the image link into
I had to adjust the size of the image using width=“200” height=“250”

BUT THIS IS TROUBLESOME

So if there is anybody out there that can offer a simpler way to do this, please let me know.

Hi Mega,

Uploading an image from your computer is simple! To make it as easy as possible, you’ll want to have the image in your project directory. I like to have a resources folder inside my root directory that holds additional folders for my images and CSS.

Like so:

project v
  index.html
  resources v
    css <
    images v
      image.png

From there, you can use the <img> tag to embed from your directory.

i.e.,

<img src="/resources/images/image.png">

But be careful! Unless the images you use are original, they still carry copyright (even if you save them to your own computer) Use resources like Unsplash, that give you free-use images.

Hope this helps!

1 Like

Do you have a link on how to set up a directory with images step by step on a Mac? I tried many different ways on following what you described, but still cant get it to work. I tried to find instructional vids on Youtube and through Code Academy, but cant seem to find what I need.

I really appreciate your help

Sorry, I am very new to this.

Douglas

Essentially, you’re creating folders nested within other folders. If you’re unsure about creating and organizing folders, this link here will take you to apple support for organizing your folders.

i.e.,
On my desktop, I have a folder that holds all of my coding resources.
image

Within this folder I place all of my coding resources and projects. A personal project I am working on right now is my Portfolio. My Portfolio folder is my root directory folder.
image
Within this folder, I nest my resources folder and index.html file
image
Then within my resources folder, I have my images and css folders.
image
Finally, within my images folder, I’ll have all of the image files I’ll be using for my website.
image

So now, if I want to embed an image from my images file within my index.html file, I do this
image

This link here provides information on HTML file paths

1 Like

The index.html file…

I already have created that in my CodeAcademy project folder. How do I download that to the desktop OR how would I create it?

I was able to create the other files as you directed me.

D

Well, there are multiple ways you can create files.

I don’t own one, but this link here has information on creating text files on a Mac. It first talks about creating a Quick Action so that you can create a text file from within your working folder. It also mentions using the TextEdit app to create and save the file in whatever location you’d want it. Finally, it talks about using Terminal to create a file. My honest opinion is to use the Terminal as it will become handy in your coding career.

And if you don’t already have one, I suggest using a text editing program. My recommendation is Visual Studio Code, but you can use others if you wish!

Kirativewd,

I also had a friend recommend a couple things for me. This is what I ended up doing…

I used a video converter → HandBrake ← and converted the .mov file to a .mp4 file. I then moved the file to Dropbox. From Dropbox, I opened the video, clicked the share button, then copied the link. I pasted the link like so… src=“Dropbox - MomoFetch.mp4 - Simplify your life

I deleted the last 4 bits → dl=0 and replaced it with raw=1

So now it looks like this… src=“https://www.dropbox.com/s/9ips2f066fv2hzh/MomoFetch.mp4?raw=1

Now, everything looks like this…

<div id="video"

Video

The video runs great.

Thanks so much for your help. It is deeply appreciated. Hopefully, I can return your time back to you one day soon.

Douglas