3

Go easy on me, I'm VERY new and trying to learn. But simply I guess, trying to find a way to display images with javascript from a local file. I'm just trying to learn through tutorials and practice but any time I want to use an image, it has to be from an outside website apparently? eg - ButtonImg.src = "https://somesite/button.png";

But I would like to use just some graphics of my own. Why can't I do something like,

ButtonImg.src = "/home/username/public/button.png";

Thanks in advance for any help, would make learning so much easier.

Improve this question
1
  • 1
    can you show some code you have already done Commented Oct 11, 2019 at 2:20

3 Answers 3

Reset to default
1

When you're referencing a file on your own website, you have three options:

  • Relative path: This reference starts relative to the file you're referencing the image from. If the files are in the same folder, you only need to specify the image name itself: file.jpg. However, if it is in a parent folder, you can prefix the link with ../ to navigate to the parent folder (like you would with the cd command): ../images/file.jpg. If the file is in a sibling folder, you would reference that folder as the prefix: images/file.jpg.

  • Root-relative path: This is the same as a relative path, but prefixed with /. This refers the the root folder of the website (/var/www/html/ on Apache). /images/file.jpg will always refer to https://www.example.com/images/file.jpg, regardless of where the file is referenced from.

  • Absolute path: This is an absolute reference to the file, as it would be accessed directly from a web browser. For example: https:://www.example.com/images/file.jpg.

There's also the ability to reference the file through the file:// protocol, though keep in mind this references a file on the local disk; it won't be accessible for anyone else viewing the website.

Keep in mind that in all three of the cases, you'll need to ensure that the image is actually uploaded to the server (and included in the project in an integrated IDE), in addition to the file it is referenced from!

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

What I recommend is dragging your file from your file explorer into your browser, then copying the link and using it in the required line in your code. For Windows, it should start with:

file:///C:/ then the files to go through.

Improve this answer

Comments

1

SMH, I'm such a noob at this, so sorry. I figured it out. I guess it actually does work like I thought, I just had my images saved incorrectly. And I thought the "coding" would be the hard part. LOL Sorry again. but thank you for the quick responses. :D

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.